children和childNodes有什么区别?

时间:2018-04-03 21:28:23

标签: javascript dom

概念上有什么区别?

MDN - childNodes

MDN - children

它们似乎都是只读实时。活着意味着什么?看起来很明显,如果DOM更新,那么你的childNodes或children会对象吗?

它们有何不同,概念

2 个答案:

答案 0 :(得分:1)

  • children仅返回属于元素的节点。
  • childNodes返回所有节点(元素,属性,文本,评论, 等)。

在文档对象模型中,所有内容都表示为"节点"在"树"节点 Nodes are differentiated by their type. 元素,评论,原始文本,属性,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>
&#13;
<div id="parent">
  <!-- This is a comment node -->
  Every line of raw text
  is also a node.
  <div>Nested div text</div>
</div>
&#13;
&#13;
&#13;

来自childNodes的MDN:

  

Node.childNodes只读属性返回的实时NodeList   第一个子节点所在元素的 子节点   分配索引0。

来自children的MDN:

  

Parent.Node属性children是一个返回的只读属性   一个实时HTMLCollection,其中包含所有 子元素   它被称为的节点。

LIVE NODE LISTS:

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

以下是一个例子:

&#13;
&#13;
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
&#13;
<div class="test">Statically created element</div>
&#13;
&#13;
&#13;

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

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

STATIC NODE LISTS:

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

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

答案 1 :(得分:0)

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

实时意味着即使在创建集合后添加和/或删除HTMLElements或节点,集合也会增长和缩小。

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