我发现自己使用JavaScript和我对面跑去childNodes和children性能。我想知道它们之间的区别是什么。还有一个比另一个更受欢迎吗？
JavaScript 中的 children 和 childNode 有什么区别？
IT技术
javascript
dom
2021-01-23 22:00:54
4个回答
理解这.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节点。
如果您确实想操作 Text 节点，则可能需要.textContent。4
1.从技术上讲，它是ParentNode 的一个属性，是 Element 包含的 mixin。
2. 它们都是元素，因为.children是一个HTMLCollection，它只能包含元素。
3. 同样，.childNodes可以容纳任何节点，因为它是一个NodeList。
4. 或.innerText。在此处或此处查看差异。
Element.children仅返回元素子节点，而Node.childNodes返回所有节点子节点。请注意，元素是节点，因此两者都可用于元素。
相信childNodes比较靠谱。例如，MDC（上面链接）指出 IE 仅children在 IE 9 中正确。 childNodes为浏览器实现者提供的错误空间较小。
到目前为止的好答案，我只想补充一点，您可以使用以下命令检查节点的类型nodeType：
yourElement.nodeType
这会给你一个整数：（取自这里）
| 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
选择一种取决于您正在寻找的方法！？
我会和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：
因为它forEach在我使用时提供了方法，window.IntersectionObserver
例如
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和valuesParentNode.children提供
item,length和namedItem
其它你可能感兴趣的问题