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

Question

我发现自己使用 JavaScript，并且遇到了

childNodes

和

children

属性。我想知道它们之间有什么区别。还有一个比另一个更受青睐吗？

Answer 1

理解

.children

是 Element 的属性。 ¹ 只有 Elements 具有

.children

，并且这些子元素都是 Element 类型。 ²

但是，

.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

或

.nodeValue

来代替。 ⁴

在决定使用哪一个之前，了解两者之间的区别非常重要：

.textContent

属性表示节点及其后代的文本内容，而

.nodeValue

属性表示当前节点的值。

^{1。从技术上讲，它是 ParentNode 的一个属性，是 Element 包含的 mixin。}
^{2.它们都是元素，因为}

.children

是一个 HTMLCollection，它只能包含元素。
^{3.同样，.childNodes
可以容纳任何节点，因为它是一个NodeList。}
^{4.或者.innerText。请参阅此处或此处。}

Answer 2

Element.children

仅返回element子级，而

Node.childNodes

返回所有node子级。请注意，元素是节点，因此两者都可以在元素上使用。

我相信

childNodes

更可靠。例如，MDC（上面链接）指出，IE 在 IE 9 中仅获得了

children

的正确性。

childNodes

为浏览器实现者提供了更少的犯错空间。

Answer 3

到目前为止，答案很好，我只想补充一点，您可以使用

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

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

问题描述投票：0回答：3

3个回答

最新问题

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

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3