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

javascript dom

2022-08-29 23:34:58

我发现自己使用JavaScript，我遇到了和属性。我想知道它们之间的区别是什么。另外，一个是否优于另一个？childNodeschildren

答案 1

了解 .children 是元素的属性。¹ 只有元素具有，并且这些子元素都是 Element 类型。^{阿拉伯数字}.children

但是，.childNodes 是 Node 的一个属性。可以包含任何节点。^{3 个}.childNodes

一个具体的例子是：

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

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

大多数情况下，您希望使用，因为通常您不希望在 DOM 操作中循环使用文本或注释节点。.children

如果确实要操作 Text 节点，则可能需要 .textContent。^{4 个}

^{1.从技术上讲，它是ParentNode的一个属性，ParentNode是Element包含的mixin。}
^{2. 它们都是元素，因为 .children 是一个 HTMLCollection，它只能包含元素。}
^{3. 同样，.childNodes 可以保存任何节点，因为它是一个 NodeList。}
^{4. 或 .innerText。请参阅此处或此处的差异。}

答案 2

Element.children 只返回元素子项，而 Node.childNodes 返回所有节点子项。请注意，元素是节点，因此两者在元素上都可用。

我相信更可靠。例如，MDC（上面链接）指出，IE仅在IE 9中正确。为浏览器实现者的错误提供了更少的空间。childNodeschildrenchildNodes