当前位置：文江博客话题详情

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

发布于 2024-12-13 01:28:35 字数 111 浏览 0 评论 0原文

我发现自己使用 JavaScript，并且遇到了 childNodes 和 children 属性。我想知道它们之间有什么区别。还有一个比另一个更受青睐吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小清晰的声音 2024-12-20 01:28:35

了解 .children 是元素的属性。 ¹ 只有Elements才有.children，并且这些children都是Element类型。 ²

但是，.childNodes< /code>是 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 操作。

如果您确实想操作文本节点，您可能需要 。 textContent 或 .nodeValue 相反。 ⁴

在决定使用哪一个之前，了解两者之间的区别非常重要：.textContent 属性表示节点及其后代<的文本内容< /strong> 而 .nodeValue 属性表示当前节点的值。

^{1.从技术上讲，它是 ParentNode 的一个属性，是 Element 包含的 mixin。}
^{2.它们都是元素，因为 .children 是一个 HTMLCollection，只能包含元素。}
^{3.同样，.childNodes 可以保存任何节点，因为它是一个 NodeList.}
^4.或者 .innerText。请参阅此处或此处。

Understand that .children is a property of an Element. ¹ Only Elements have .children, and these children are all of type Element. ²

However, .childNodes is a property of Node. .childNodes can contain any node. ³

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 .children because generally you don't want to loop over Text or Comment nodes in your DOM manipulation.

If you do want to manipulate Text nodes, you probably want .textContent or .nodeValue instead. ⁴

It's important to understand the distinction between the 2, before deciding which one to use: The .textContent property represents the text content of the node and its descendants whereas the .nodeValue property represents the value of the current node.

^{1. Technically, it is an attribute of ParentNode, a mixin included by Element.}
^{2. They are all elements because .children is a HTMLCollection, which can only contain elements.}
^{3. Similarly, .childNodes can hold any node because it is a NodeList.}
^{4. Or .innerText. See the differences here or here.}

回复收藏 0 原文

月隐月明月朦胧 2024-12-20 01:28:35

Element.children 仅返回元素< /strong> 子节点，而 Node.childNodes 返回所有节点子节点。请注意，元素是节点，因此两者都可用于元素。

我相信 childNodes 更可靠。例如，MDC（上面链接）指出，IE 在 IE 9 中只获得了 children 权限。childNodes 为浏览器实现者提供了更少的犯错空间。

回复收藏 0 原文

美人如玉 2024-12-20 01:28:35

到目前为止，答案很好，我只想补充一点，您可以使用 nodeType 检查节点的类型：

yourElement.nodeType

这将为您提供一个整数：（取自 < a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType" rel="noreferrer">此处）

| 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

Good answers so far, I want to only add that you could check the type of a node using 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:

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

回复收藏 0 原文

~没有更多了~