子节点和子节点有什么区别？ [复制]答案

【问题标题】：What is the difference between children and childNodes? [duplicate]子节点和子节点有什么区别？ [复制]
【发布时间】：2018-09-13 07:54:57
【问题描述】：

从概念上讲有什么区别？

MDN - childNodes

MDN - children

它们似乎都是只读的和活动的。活着是什么意思？如果 DOM 更新，您的 childNodes 或 children 对象也会更新，这似乎很明显吗？

它们有什么不同，在概念上。

【问题讨论】：

是的，这就是生活的意义。

标签： javascript dom

【解决方案1】：

children 仅返回作为元素的节点。
childNodes 返回所有节点（元素、属性、文本、注释、等）。

在文档对象模型中，所有内容都表示为节点“树”中的“节点”。 Nodes are differentiated by their type. 元素、cmets、原始文本、属性、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 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

&lt;div class="test"&gt;Statically created element&lt;/div&gt;

当您使用以下任何一种方法查询文档时，您将获得一个活动节点列表：

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

静态节点列表：

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

.querySelectorAll() 产生一个静态节点列表。

【讨论】：

从概念上讲，元素与节点有何不同。您举了一些例子，但是可以推断出每个例子的定义是什么？我可以说 childNodes 包含描述 DOM 所需的一切吗？我可以说孩子只包含元素吗？
@BrannonTeeer 答案再次更新。但是，从概念上来说，这样想……一辆汽车由数千个“零件”（这里的零件是一个节点）组成，但其中只有一些零件是软管（软管是一个元素）。节点只是引用文档某些组件的一种非常通用的方式。元素是一种特定类型的组件。

【解决方案2】：

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

实时意味着即使在创建集合之后，集合也会随着 HTMLElement 或节点的添加和/或删除而增长和缩小。

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

【讨论】：