NodeList什么时候是动态的，什么时候是静态的？
从MDN到NodeList
在某些情况下，NodeList是一个活动集合，这意味着DOM中的更改反映在集合中。例如，Node.childNodes是实时的： var parent = document.getElementById('parent')；var child_nodes = parent.childNodes；console.log(child_nodes.length)；//假设"2“child_nodes console.log(child_nodes.length)；//应输出"3” 在其他情况下，NodeList是一个静态集合，这意味着DOM中的任何后续更改都不会影响集合的内容。document.querySelectorAll返回一个静态NodeList。
所以..。有点烦人！对于哪些方法返回活动列表和哪些方法返回静态列表，是否有任何中心引用，而不必单独检查DOM的所有不同部分？这里有什么规定吗？
回答 2
Stack Overflow用户
发布于 2015-01-27 05:23:09
关于每种方法的详细信息，如果它是活动的还是不存在的，但是似乎没有确定它的标准约定。
document.getElementsByClassName()是一个HTMLCollection，是现场直播的。
document.getElementsByTagName()是一个HTMLCollection，是现场直播的。
document.getElementsByName()是一个NodeList，是现场直播的。
document.querySelectorAll()是NodeList，是而不是 live。
HTMLCollection似乎总是活的。
HTMLCollection是一个节点列表。单个节点可以通过序号索引或节点的名称或id属性访问。 注意:假设HTML中的集合是活动的，这意味着当基础文档被更改时，它们会自动更新。
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506
因此，HTML总是“在dom中”，而nodeList是一个更一般的构造，可能在DOM中，也可能不在DOM中。
NodeList对象是节点的集合..。NodeList接口提供了节点有序集合的抽象，而不定义或限制该集合的实现方式。DOM中的NodeList对象是活动的。
http://www.w3.org/TR/DOM-Level-3-Core/core.html#td-live
听起来不错，对吧？
集合是表示DOM节点列表的对象。集合可以是活动的，也可以是静态的。除非另有说明，收藏必须是实时的。
http://www.w3.org/TR/2012/WD-dom-20120405/#collections
因此，静态集合将在规范中这样表示。因此，根据这个逻辑，document.querySelectorAll()是一个集合，但它不在DOM中。因为虽然集合可能是活动的，也可能不是活动的，但是DOM中的集合必须是活动的.这种区别并不是非常有用的。
好的，这里有一个快速的方法来确定一个collection是否是活动的；它将集合的一个成员的一个克隆附加到DOM (因此它将匹配选择器)，并检查长度是否改变，然后删除它(因此页面不受影响)。
演示
function isLive(collection) {
if (HTMLCollection.prototype.isPrototypeOf(collection)) return true // HTMLCollections are always live
const length = collection.length;
if (!length) return undefined; // Inconclusive
const el = collection.item(0);
const parent = el.parentNode;
const clone = el.cloneNode();
clone.style.setProperty('display', 'none', 'important');
parent.appendChild(clone);
const live = collection.length !== length;
parent.removeChild(clone);
return live;
}
const divs1 = document.getElementsByClassName('c');
const divs2 = document.getElementsByTagName('span');
const divs3 = document.getElementsByName('notFound');
const divs4 = document.querySelectorAll('.c');
console.log("document.getElementsByClassName('c'):", divs1.toString()); // [object HTMLCollection]
console.log("document.getElementsByTagName('notFound'):", divs2.toString()); // [object HTMLCollection]
console.log("document.getElementsByName('notFound'):", divs3.toString()); // [object NodeList]
console.log("document.querySelectorAll('.c'):", divs4.toString()); // [object NodeList]
console.log('isLive(divs1)', isLive(divs1)); // true
console.log('isLive(divs2)', isLive(divs2)); // true
console.log('isLive(divs3)', isLive(divs3)); // undefined
console.log('isLive(divs4)', isLive(divs4)); // false<html>
<body>
<div>
<div class="c">C1</div>
<div class="c">C2</div>
</div>
<div>
<div class="c">C3</div>
<div class="c">C4</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2015-01-27 04:10:09
我不知道是否有中心引用，但我知道返回HTMLCollections和live NodeLists的方法和属性如下：
方法
parentNode.getElementsByClassName()-返回一个HTMLCollectionparentNode.getElementsByTagName()相关-返回一个HTMLCollectionparentNode.getElementsByTagNameNS()-返回一个HTMLCollection- /T1582-1997基础产品
document.getElementsByName()产品-回发NodeList
属性
parentNode.children相关-返回一个HTMLCollection- /T15257-1996技术转让的
Node.childNodes-返回NodeList
https://stackoverflow.com/questions/28163033
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号