JS 获取父元素下的所有子元素|极客笔记

JS 获取父元素下的所有子元素

在前端开发中，经常会遇到需要操作父元素下的所有子元素的情况。在 JavaScript 中，可以通过一些方法来实现这个目标。本文将介绍几种常用的方法来获取父元素下的所有子元素，并通过代码示例来演示它们的用法。

方法一：使用 children 属性

每个 DOM 元素都有一个名为 children 的属性，该属性可以返回一个包含所有子元素的 HTMLCollection 对象。我们可以通过访问这个属性来获取父元素下的所有子元素。

// 获取父元素
const parent = document.getElementById('parent');

// 获取父元素下的所有子元素
const children = parent.children;

// 遍历子元素并输出
for (let i = 0; i < children.length; i++) {
  console.log(children[i]);
}

在上面的示例中，我们首先通过 getElementById 方法获取到父元素，然后通过访问 children 属性获取到所有子元素，并通过遍历输出每一个子元素。

方法二：使用 querySelectorAll 方法

除了使用 children 属性，我们还可以使用 querySelectorAll 方法来获取符合特定 CSS 选择器的所有子元素。

// 获取父元素
const parent = document.getElementById('parent');

// 使用 querySelectorAll 方法获取所有子元素
const children = parent.querySelectorAll('*');

// 遍历子元素并输出
children.forEach(child => {
  console.log(child);
});

在上面的示例中，我们利用 querySelectorAll 方法传入通配符 * 来选择所有子元素，并通过 forEach 方法遍历输出每一个子元素。

方法三：使用 childNodes 属性

除了 children 属性，每个 DOM 元素还有一个名为 childNodes 的属性，该属性返回一个包含所有子节点的 NodeList 对象。这个属性将返回包括文本节点、注释节点和元素节点等所有子节点。

// 获取父元素
const parent = document.getElementById('parent');

// 获取父元素下的所有子节点
const children = parent.childNodes;

// 遍历子节点并输出
children.forEach(child => {
  console.log(child);
});

在上面的示例中，我们通过访问 childNodes 属性来获取所有子节点，并通过 forEach 方法遍历输出每一个子节点。