JavaScript中的children和childNodes有什么区别？答案

【问题标题】：What is the difference between children and childNodes in JavaScript?JavaScript中的children和childNodes有什么区别？
【发布时间】：2011-12-17 15:40:22
【问题描述】：

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

【问题讨论】：

标签： javascript dom

【解决方案1】：

了解.children 是Element 的属性。 ¹ 只有元素有.children，并且这些子元素都是元素类型。 ²

但是，.childNodes 是 Node 的属性。 .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.

大多数时候，您希望使用 .children，因为通常您不想在 DOM 操作中循环遍历 Text 或 Comment 节点。

如果您确实想操作文本节点，您可能需要.textContent。 ⁴

^{1.从技术上讲，它是 ParentNode 的一个属性，它是 Element 包含的一个 mixin。}
^{2.它们都是元素，因为.children 是一个HTMLCollection，它只能包含元素。}
^{3.同样，.childNodes 可以容纳任何节点，因为它是 NodeList。}
^{4。或.innerText。查看here 或here 的区别。}

【讨论】：

是的，IE好像有点问题：quirksmode.org/dom/w3c_core.html#t71
其实children是parentnode接口的属性，不是element。 usonsci.wordpress.com/2014/09/30/html-children-vs-childnodes
似乎是 iOS 8.3（可能是其他系统？）XML 文档不支持 .children：jsfiddle.net/fbwbjvch/1
仅在带有 XML 节点的 Microsoft Edge 上遇到此问题。 Microsoft Edge 似乎不喜欢孩子。很好，我不希望浏览器重现。
“元素与节点”的自然跟进：stackoverflow.com/questions/132564/…

【解决方案2】：

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

我相信childNodes 更可靠。例如，MDC（上面链接）指出，IE 仅在 IE 9 中获得了children。childNodes 为浏览器实现者提供的错误空间较小。

【讨论】：

该死，如果这仅适用于 IE 6-8，那将是梦想成真。
@minitech 它确实有效（对于某些工作价值）。显然.children 并没有过滤掉评论节点，而是过滤掉了文本节点。
@Raynos：完全一样 - 与 .getElementsByTagName('*') 相同。 IE有时会很烦人...
children 的 shim/polyfill 实现支持 IE。

【解决方案3】：

到目前为止答案很好，我只想补充一点，您可以使用 nodeType 检查节点的类型：

yourElement.nodeType

这会给你一个整数：（取自here）

| Value |             Constant             |                          Description                          |  |
|-------|----------------------------------|---------------------------------------------------------------|--|
|    1  | Node.ELEMENT_NODE                | An Element node such as <p> or <div>.                         |  |
|    2  | Node.ATTRIBUTE_NODE              | An Attribute of an Element. The element attributes            |  |
|       |                                  | are no longer implementing the Node interface in              |  |
|       |                                  | DOM4 specification.                                           |  |
|    3  | Node.TEXT_NODE                   | The actual Text of Element or Attr.                           |  |
|    4  | Node.CDATA_SECTION_NODE          | A CDATASection.                                               |  |
|    5  | Node.ENTITY_REFERENCE_NODE       | An XML Entity Reference node. Removed in DOM4 specification.  |  |
|    6  | Node.ENTITY_NODE                 | An XML <!ENTITY ...> node. Removed in DOM4 specification.     |  |
|    7  | Node.PROCESSING_INSTRUCTION_NODE | A ProcessingInstruction of an XML document                    |  |
|       |                                  | such as <?xml-stylesheet ... ?> declaration.                  |  |
|    8  | Node.COMMENT_NODE                | A Comment node.                                               |  |
|    9  | Node.DOCUMENT_NODE               | A Document node.                                              |  |
|   10  | Node.DOCUMENT_TYPE_NODE          | A DocumentType node e.g. <!DOCTYPE html> for HTML5 documents. |  |
|   11  | Node.DOCUMENT_FRAGMENT_NODE      | A DocumentFragment node.                                      |  |
|   12  | Node.NOTATION_NODE               | An XML <!NOTATION ...> node. Removed in DOM4 specification.   |  |

注意根据Mozilla：

以下常量已被弃用，不应使用不再：Node.ATTRIBUTE_NODE、Node.ENTITY_REFERENCE_NODE、Node.ENTITY_NODE、Node.NOTATION_NODE

【讨论】：

【解决方案4】：

选择一个取决于您要寻找的方法！？

我会选择ParentNode.children：

因为它提供了namedItem 方法，允许我直接获取其中一个子元素，而无需遍历所有子元素或避免使用getElementById 等。

例如

ParentNode.children.namedItem('ChildElement-ID'); // JS
ref.current.children.namedItem('ChildElement-ID'); // React
this.$refs.ref.children.namedItem('ChildElement-ID'); // Vue

我会选择Node.childNodes：

当我使用window.IntersectionObserver 时，它提供了forEach 方法例如

nodeList.forEach((node) => { observer.observe(node) })
// IE11 does not support forEach on nodeList, but easy to be polyfilled.

在 Chrome 83 上

Node.childNodes提供entries、forEach、item、keys、length和values

ParentNode.children 提供item、length 和namedItem

【讨论】：