JavaScript：如何遍历一个元素的所有子元素？

嘿，这个问题我经常碰到，给你整理几种实用的JavaScript遍历元素子元素的方法，每种都有对应的场景，你按需挑选就行：

1. 只关注HTML元素节点？用children + 普通for循环 #

如果你只想遍历父元素下的HTML元素节点（比如<div>、<p>这类，不包括空白文本、注释节点），children属性是最合适的选择，它返回一个HTMLCollection，直接用for循环就能遍历：

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

// 遍历所有子元素
for (let i = 0; i < parent.children.length; i++) {
  const child = parent.children[i];
  // 这里写你的处理逻辑，比如打印子元素的标签名
  console.log('子元素标签:', child.tagName);
}

2. 要筛选特定类型的子元素？用querySelectorAll + forEach #

如果需要遍历父元素下符合特定选择器的子元素（比如所有class为card的子元素），querySelectorAll绝对是高效的选择，它返回一个NodeList，现代浏览器支持直接用forEach遍历：

const parent = document.getElementById('parentElement');
// 筛选父元素下所有class为card的子元素
const targetChildren = parent.querySelectorAll('.card');

// 遍历处理
targetChildren.forEach(child => {
  console.log('目标子元素内容:', child.textContent.trim());
});

如果要兼容更老的浏览器，也可以用for...of循环遍历NodeList。

3. 需要处理所有子节点（包括文本、注释）？用childNodes + for...of #

如果你的场景需要处理父元素下的所有节点（比如空白文本节点、注释节点<!-- -->），就用childNodes属性，它返回包含所有子节点的NodeList：

const parent = document.getElementById('parentElement');

for (const node of parent.childNodes) {
  // 可以通过nodeType判断节点类型
  if (node.nodeType === Node.ELEMENT_NODE) {
    console.log('元素节点:', node);
  } else if (node.nodeType === Node.TEXT_NODE) {
    // 过滤掉空白文本
    const text = node.textContent.trim();
    if (text) console.log('文本节点内容:', text);
  } else if (node.nodeType === Node.COMMENT_NODE) {
    console.log('注释节点:', node.textContent);
  }
}

这里的Node.ELEMENT_NODE对应数值1，Node.TEXT_NODE是3，Node.COMMENT_NODE是8，直接用常量可读性更高。

4. 兼容超老浏览器？用firstChild + nextSibling #

如果你的代码要兼容IE8这类古老浏览器，上面的方法可能有兼容问题，这时候可以用老式的链式遍历方法：

const parent = document.getElementById('parentElement');
let currentChild = parent.firstChild;

while (currentChild) {
  // 同样可以判断节点类型，只处理元素节点
  if (currentChild.nodeType === Node.ELEMENT_NODE) {
    console.log('子元素:', currentChild);
  }
  // 移动到下一个兄弟节点
  currentChild = currentChild.nextSibling;
}

不过现在这种场景已经很少见了，除非维护非常老旧的项目。

总结一下 #

• 只处理HTML元素 → 用children
• 筛选特定子元素 → 用querySelectorAll
• 处理所有节点类型 → 用childNodes
• 兼容超老浏览器 → 用firstChild+nextSibling

内容的提问来源于stack exchange，提问作者Voided