javascript - child 和 child 节点有什么区别？

Question

这个问题已经有答案了:

What is the difference between children and childNodes in JavaScript? (3 个回答)

已关闭 5 年前。

概念上有什么区别？

MDN - childNodes

MDN - children

它们似乎都是只读和实时。活着是什么意思？如果 DOM 更新，您的 childNodes 或 child 对象也会更新，这看起来是不是很明显？

它们在概念上有何不同。

Answer 1

• children 仅返回属于元素的节点。
• childNodes 返回所有节点(元素、属性、文本、注释、等)。

在文档对象模型中，所有内容都表示为节点“树”中的“节点”。 <强> Nodes are differentiated by their type.元素、注释、原始文本、属性、文档类型都是文档中的部分或“节点”。

但是，元素只是那些由“标签”定义的节点。换句话说，元素节点只是节点的一种类型。这通常是一件大事，因为在 DOM 中，一切都是节点，但通常，您只对元素节点感兴趣。

在下面的示例中，我们将计算有多少个节点，然后有多少个元素节点:

console.log("Total child nodes: " + document.getElementById("parent").childNodes.length); // The comment, text and element nodes
console.log("Just child elements: " + document.getElementById("parent").children.length);   // Just the nested <div>

<div id="parent">
  <!-- This is a comment node -->
  Every line of raw text
  is also a node.
  <div>Nested div text</div>
</div>

来自 childNodes 上的 MDN:

The Node.childNodes read-only property returns a live NodeList of child nodes of the given element where the first child node is assigned index 0.

来自 MDN 关于 children 的信息:

The Parent.Node property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called.

<小时/>

实时节点列表:

“实时”节点列表始终引用最新的匹配项，因此您始终可以确保所有相关节点都已添加到集合中。当您在进行查询后动态添加与您已进行的查询匹配的新节点时，这非常有用。不过，您必须小心处理这些类型的查询，因为它们使集合保持最新的方式是在每次与集合交互时重新扫描 DOM，这在性能方面可能非常浪费。仅当您知道将来会动态添加节点并且希望这些节点包含在之前创建的集合中时，才使用事件节点列表。

这是一个例子:

let tests = document.getElementsByClassName("test");  // Document is not scanned here

console.log("Count of elements that have the \"test\" class: " + tests.length); // Document is scanned again here

// dynamically crate new element that belongs in the node list already defined
let newTest = document.createElement("p");
newTest.classList.add("test");
newTest.textContent = "Dynamically created element";
document.body.appendChild(newTest);

console.log("Count of elements that have the \"test\" class: " + tests.length); // Document is scanned here

<div class="test">Statically created element</div>

当您使用以下任何方法查询文档时，您将获得实时节点列表:

• .getElementsByName()
• .getElementsByTagName()
• .getElementsByClassName()

静态节点列表:

静态节点列表是在进行查询时仅在文档中查询一次匹配节点的列表。如果稍后动态添加新节点，它们不会包含在集合中。虽然这比事件节点列表限制更多，但它也更高效且更常用。

.querySelectorAll() 生成静态节点列表。