JavaScript 中的 children 和 childNode 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7935689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between children and childNodes in JavaScript?
提问by John
I have found myself using JavaScript and I ran across childNodesand childrenproperties. I am wondering what the difference between them is. Also is one preferred to the other?
我发现自己使用JavaScript和我对面跑去childNodes和children性能。我想知道它们之间的区别是什么。还有一个比另一个更受欢迎吗？
回答by Raynos
Understand that .childrenis a property of an Element. 1Only Elements have .children, and these children are all of type Element. 2
理解这.children是Element的属性。1只有 Elements 有.children，并且这些孩子都是 Element 类型。2
However, .childNodesis a property of Node. .childNodescan contain any node. 3
但是，.childNodes是Node的属性。.childNodes可以包含任何节点。3
A concrete example would be:
一个具体的例子是：
let el = document.createElement("div");
el.textContent = "foo";
el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0; // No Element children.
Most of the time, you want to use .childrenbecause generally you don't want to loop over Textor Commentnodes in your DOM manipulation.
大多数时候，您想要使用.children是因为通常您不想在 DOM 操作中循环遍历Text或Comment节点。
If you do want to manipulate Text nodes, you probably want .textContentinstead. 4
如果您确实想操作 Text 节点，则可能需要.textContent。4
1. Technically, it is an attribute of ParentNode, a mixin included by Element.
2. They are all elements because .childrenis a HTMLCollection, which can only contain elements.
3. Similarly, .childNodescan hold any node because it is a NodeList.
4. Or .innerText. See the differences hereor here.
1.从技术上讲，它是ParentNode 的一个属性，Element 包含的 mixin。
2. 它们都是元素，因为.children是一个HTMLCollection，它只能包含元素。
3. 同样，.childNodes可以容纳任何节点，因为它是一个NodeList。
4. 或.innerText。在此处或此处查看差异。
回答by Matthew Flaschen
Element.childrenreturns only elementchildren, while Node.childNodesreturns all nodechildren. Note that elements are nodes, so both are available on elements.
Element.children仅返回元素子节点，而Node.childNodes返回所有节点子节点。请注意，元素是节点，因此两者都可用于元素。
I believe childNodesis more reliable. For example, MDC (linked above) notes that IE only got childrenright in IE 9. childNodesprovides less room for error by browser implementors.
相信childNodes比较靠谱。例如，MDC（上面链接）指出 IE 只children在 IE 9 中正确。 childNodes为浏览器实现者提供了更少的出错空间。
回答by Csaba
Good answers so far, I want to only add that you could check the type of a node using nodeType:
到目前为止的好答案，我只想补充一点，您可以使用以下命令检查节点的类型nodeType：
yourElement.nodeType
yourElement.nodeType
This will give you an integer: (taken from 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. | |
Note that according to Mozilla:
请注意，根据Mozilla：
The following constants have been deprecated and should not be used anymore: Node.ATTRIBUTE_NODE, Node.ENTITY_REFERENCE_NODE, Node.ENTITY_NODE, Node.NOTATION_NODE
以下常量已被弃用，不应再使用：Node.ATTRIBUTE_NODE、Node.ENTITY_REFERENCE_NODE、Node.ENTITY_NODE、Node.NOTATION_NODE
