JavaScript中的child和childNodes有什么区别？

Question

我发现自己使用JavaScript，并且遇到了childNodes和children属性。我想知道它们之间有什么区别。也是一个比另一个更好？

Answer 1

了解这.children是Element的属性。1只有Elements具有.children，并且这些子元素都是Element类型的。2

但是，这.childNodes是Node的属性。.childNodes可以包含任何节点。3

一个具体的例子是：

let el = document.createElement("div");
el.textContent = "foo";

el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0;   // No Element children.

大多数情况下，您想使用它，.children因为通常您不想在DOM操作中遍历Text或Comment节点。

如果确实要操作“文本”节点，则可能需要.textContent替代。4

1.从技术上讲，它是ParentNode的属性，Element所包含的mixin。
2.它们都是元素，因为.children是HTMLCollection，只能包含元素。
3.同样，.childNodes可以容纳任何节点，因为它是NodeList。
4.或者.innerText。在此处或此处查看差异。