children 和 childNode 有什么区别？ [重复]

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.Node

属性children是一个只读属性，返回 一个实时 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 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 again here

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

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

.getElementsByName()

.getElementsByTagName()

• .getElementsByClassName()
• 静态节点列表：

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

.querySelectorAll()

生成静态节点列表。

每个都返回一个集合，但它们是不同对象的集合。

Answer 2

它们的区别仅在于集合中每个项目可用的方法和属性。这不是概念上的区别，而是API的区别。