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

我发现自己使用JavaScript，我遇到了childNodes和children属性。我想知道它们之间的区别是什么。还有，两者孰优孰劣?

134287 次浏览
小开
最佳答案

理解.children是元素的属性。只有元素有.children，这些子元素都是Element类型。2

然而，.childNodes是节点的属性。.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节点，你可能会使用.textContent。4

< p > 1. 从技术上讲，它是ParentNode的属性，是Element包含的一个mixin。
2. 它们都是元素，因为.children是一个HTMLCollection，只能包含元素。
3.类似地，.childNodes可以保存任何节点，因为它是NodeList。
4. 或.innerText。查看差异在这里或在这里.

小开

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

我相信childNodes更可靠。例如，MDC(上面的链接)指出IE在ie9中只有children是正确的。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:

以下常量已弃用，不应使用 了:节点。ATTRIBUTE_NODE,节点。ENTITY_REFERENCE_NODE,节点。ENTITY_NODE,节点。NOTATION_NODE < / p >


提交答案