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

Question

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

我发现自己使用JavaScript和我对面跑去childNodes和children性能。我想知道它们之间的区别是什么。另一个是另一个优先选择？

Answer 1

.children是元素的属性。只有Elements有子节点，这些子节点都是Element类型。但是Node.childNodes的属性。可以包含任何节点。.childNodes所以一个具体的例子就是var el = document.createElement("div");el.textContent = "foo"el.childNodes.length === 1; // TextNode is a node childel.children.length === 0; // no Element children当然.children是DOM4所以浏览器支持是不稳定的，但是如果你使用DOM-shim，你的跨浏览器问题就会消失！大多数时候你想使用，.children因为通常你不想在DOM操作中循环遍历TextNodes或Comments。如果您确实想要操作TextNodes，则可能需要.textContent。

Answer 2

Element.children仅返回元素子元素，同时Node.childNodes返回所有节点子元素。请注意，元素是节点，因此两者都可以在元素上使用。我相信childNodes更可靠。例如，MDC（上面链接）指出，IE仅children在IE 9中正确使用。浏览 childNodes器实现者提供的错误空间较小。

Answer 3

&nbsp;到目前为止，答案很好，我只想补充一点，你可以使用以下方法检查节点的类型nodeType：yourElement.nodeType这会给你一个整数:(取自这里）| Value |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Constant&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Description&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; ||-------|----------------------------------|---------------------------------------------------------------|--||&nbsp; &nbsp; 1&nbsp; | Node.ELEMENT_NODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | An Element node such as <p> or <div>.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; ||&nbsp; &nbsp; 2&nbsp; | Node.ATTRIBUTE_NODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | An Attribute of an Element. The element attributes&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; ||&nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | are no longer implementing the Node interface in&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; ||&nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | DOM4 specification.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; ||&nbsp; &nbsp; 3&nbsp; | Node.TEXT_NODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| The actual Text of Element or Attr.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; ||&nbsp; &nbsp; 4&nbsp; | Node.CDATA_SECTION_NODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | A CDATASection.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; ||&nbsp; &nbsp; 5&nbsp; | Node.ENTITY_REFERENCE_NODE&nbsp; &nbsp; &nbsp; &nbsp;| An XML Entity Reference node. Removed in DOM4 specification.&nbsp; |&nbsp; ||&nbsp; &nbsp; 6&nbsp; | Node.ENTITY_NODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| An XML <!ENTITY ...> node. Removed in DOM4 specification.&nbsp; &nbsp; &nbsp;|&nbsp; ||&nbsp; &nbsp; 7&nbsp; | Node.PROCESSING_INSTRUCTION_NODE | A ProcessingInstruction of an XML document&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; ||&nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | such as <?xml-stylesheet ... ?> declaration.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; ||&nbsp; &nbsp; 8&nbsp; | Node.COMMENT_NODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | A Comment node.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; ||&nbsp; &nbsp; 9&nbsp; | Node.DOCUMENT_NODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| A Document node.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; ||&nbsp; &nbsp;10&nbsp; | Node.DOCUMENT_TYPE_NODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | A DocumentType node e.g. <!DOCTYPE html> for HTML5 documents. |&nbsp; ||&nbsp; &nbsp;11&nbsp; | Node.DOCUMENT_FRAGMENT_NODE&nbsp; &nbsp; &nbsp; | A DocumentFragment node.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; ||&nbsp; &nbsp;12&nbsp; | Node.NOTATION_NODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| An XML <!NOTATION ...> node. Removed in DOM4 specification.&nbsp; &nbsp;|&nbsp; |请注意，根据Mozilla：以下常量已被弃用，不应再使用：Node.ATTRIBUTE_NODE，Node.ENTITY_REFERENCE_NODE，Node.ENTITY_NODE，Node.NOTATION_NODE