孩子和孩子节点有什么区别？

Question

从概念上讲有什么区别？

MDN-子节点

MDN-儿童

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

从概念上讲，它们有何不同。

Answer 1

• children仅返回那些属于元素的节点。
• childNodes返回所有节点（元素、属性、文本、注释等）。

在文档对象模型中，所有内容都表示为节点“树”中的“节点”。节点按其类型进行区分。元素、注释、原始文本、属性，都是doctype文档中的部分或“节点”。

但是，元素只是那些由“标签”定义的节点。换句话说，元素节点只是节点的一种类型。这通常是一件大事，因为在 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>

来自 MDN childNodes：

只读属性返回给定元素的子节点Node.childNodes的活动 NodeList ，其中第一个子节点分配索引 0。

来自 MDN children：

属性Parent.Nodechildren是一个只读属性，它返回一个实时HTMLCollection，其中包含调用它的节点的所有子元素。

实时节点列表：

“实时”节点列表是始终引用最新匹配项的列表，因此您始终可以确保所有相关节点都已添加到集合中。当您在进行查询后动态添加与您已进行的查询匹配的新节点时，这非常有用。不过，您必须小心处理这些类型的查询，因为它们使集合保持最新的方式是在每次与集合交互时重新扫描 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()生成静态节点列表。