概念上有什么区别?
它们都是只读的且动态的。那么live是什么意思呢?显然,如果DOM更新了,您的childNodes或children对象也会更新吗?
从概念上讲,它们有什么不同?
概念上有什么区别?
它们都是只读的且动态的。那么live是什么意思呢?显然,如果DOM更新了,您的childNodes或children对象也会更新吗?
从概念上讲,它们有什么不同?
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>
每个返回一个集合,但它们是不同对象的集合。
Live表示即使在创建集合后添加或删除HTMLElements或Nodes,集合也会增长和缩小。
它们仅在集合中每个项可用的方法和属性方面有所不同。这不是概念上的差异,而是API的差异。