JavaScript中儿童和儿童诺德斯有什么区别？

发布于 2025-01-31 22:52:07 字数 110 浏览 4 评论 0 原文

我发现自己正在使用JavaScript，并且跨过 childnodes 和 children 属性。我想知道它们之间的区别是什么。另一个比另一个更喜欢吗？

原文

分享到QQ

分享到微博

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

发布评论

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

美胚控场 2025-02-07 22:52:07

了解 .children 是 element 的属性。 ¹只有元素具有 .Children ，而这些孩子都是类型元素。 ²

但是， .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 ，因为通常您不想循环 text 或评论您的DOM操纵中的节点。

如果您确实想操纵文本节点，则可能需要 。 textcontent 或而不是。 ⁴

在确定要使用哪个之前，了解2之间的区别很重要： .textContent 属性代表节点的文本内容及其后代< /strong> .NodeValue 属性代表当前节点的值。

^{1。从技术上讲，它是 parentnode 的属性。}
^{2。它们都是元素，因为 .Children 是 htmlCollection 它只能包含元素。}
^{3。同样， .childnodes 可以保存任何节点，因为它是 noReferrer“> nodeList 。}
^4。或 .innertext .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 原文

幸福还没到 2025-02-07 22:52:07

element.Children.Children 仅返回 /strong>孩子，而 node> node.childnodes 返回所有节点儿童。请注意，元素是节点，因此两者都可以在元素上找到。

我相信 childnodes 更可靠。例如，MDC（上面链接）指出，IE仅在IE 9中获得儿童。

回复收藏 0 原文

俏︾媚 2025-02-07 22:52:07

到目前为止，我只想补充说，您可以使用 nodeType ：

yourlement.nodetype

这将为您提供一个整数：（从<<<<<< a href =“ https://developer.mozilla.org/en-us/docs/web/api/node/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.nodation_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 原文

~没有更多了~