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

Question

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

javascriptdom

3

概念上有什么区别？

MDN - childNodes

MDN - children

它们都是只读的且动态的。那么live是什么意思呢？显然，如果DOM更新了，您的childNodes或children对象也会更新吗？

从概念上讲，它们有什么不同？

- Brannon Teeer

是的，这就是“实时”的意思。 - Barmar

2个回答

0

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

Live表示即使在创建集合后添加或删除HTMLElements或Nodes，集合也会增长和缩小。

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

- Randy Casburn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scott Marcus · Accepted Answer

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>

childNodes 属性来自 MDN：

Node.childNodes 是一个只读属性，它返回给定元素的所有子节点 的 NodeList，其中第一个子节点的索引为 0。

children 属性来自 MDN：

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

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

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

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

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

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