浏览器中的子节点和子元素：childNodes 与 children 的区别

在现代 Web 开发的浩瀚世界中，我们经常会遇到诸如 childNodes 和 children 这样的术语。这些术语虽然看似相近，却有着微妙的差别，理解它们的细微差别对于熟练掌握 DOM（文档对象模型）至关重要。

childNodes 与 children 的概念

childNodes 属性返回一个包含节点所有子节点的 NodeList，其中包括元素节点、文本节点、注释节点等各种类型的节点。

children 属性只返回一个包含节点的所有元素子节点的 HTMLCollection。它不包括文本节点、注释节点或其他类型的子节点。

关键区别

总结一下，childNodes 和 children 的主要区别在于：

• 包含的节点类型： childNodes 包含所有子节点，而 children 只包含元素子节点。
• 动态更新： childNodes 会在 DOM 发生变化时动态更新，而 children 则不会。
• 性能： childNodes 的性能比 children 稍差，因为前者需要遍历所有子节点，而后者只需要遍历元素子节点。

使用场景

由于 children 只包含元素子节点，因此它通常用于遍历和修改节点树中的元素。例如，以下代码获取一个元素的所有子元素并打印它们的文本内容：

const element = document.getElementById("my-element");
for (const child of element.children) {
  console.log(child.textContent);
}

而 childNodes 则更常用于更高级的 DOM 操作，例如处理文本节点或注释节点。例如，以下代码获取一个元素的所有子节点，包括文本节点：

const element = document.getElementById("my-element");
for (const child of element.childNodes) {
  if (child.nodeType === Node.TEXT_NODE) {
    console.log(child.textContent);
  }
}

示例

考虑以下 HTML 片段：

<div id="my-element">
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <!-- Comment -->
</div>

对于 my-element 元素：

• childNodes 属性将返回 5 个节点：<p> 元素、<span> 元素、注释节点、两个文本节点（分别在 <p> 和 <span> 元素内）。
• children 属性将返回 2 个节点：<p> 元素和 <span> 元素。

结论

了解 childNodes 和 children 之间的区别对于有效地操作 DOM 至关重要。虽然 children 更常用于遍历和修改元素子节点，但 childNodes 在需要处理更高级别的 DOM 操作时更有用。通过掌握这些细微差别，您可以充分利用 DOM 的强大功能，构建交互式和动态的 Web 应用程序。