为什么我要静态的NodeList/HTMLCollection而不是live呢?NodeList，如果我不需要在结果列表

Why would I ever want a static NodeList/HTMLCollection over a "live" NodeList if I don't need the granularity of CSS Selectors in the resulting list?

本文关键字：NodeList 如果 不需要 结果 列表 静态 我要 HTMLCollection 为什么 live      更新时间：2023-09-26

我经常听到这样的说法，因为实时的nodelist是"坏的"(参见Zakas的文章)，这就决定了让querySelectorAll返回一个静态的HTMLCollection。为什么人们认为现场nodelist是一件坏事?代码示例可能会帮助我最好地理解这一点。

如果，无论何时我想使用一个缓存的节点集合的值进行任何计算，这个集合碰巧不是一个过时的快照，我真的不能把它看作是一件"不好"的事情。

我完全理解它是多么有用的选择元素与CSS选择器字符串，但如果我只能可靠地运行代码对收集后，它似乎是相当少的有用比一个活的NodeList。

实时节点并不坏，但如果你不习惯它们，它们的行为可能会让你感到困惑。特别是当你把它们看作数组(它们不是数组)

考虑一个经典的例子，将页面中的div数量增加一倍。这里有三个尝试: 
// Example 1 (doesn't work)
for(var i = 0; i < document.querySelectorAll("div").length ; i++){
    document.body.appendChild(document.createElement("div"));
}
// Example 2 (works)
var divs = document.querySelectorAll("div");
for(var i = 0; i < divs.length ; i++){
    document.body.appendChild(document.createElement("div"));
}
// Example 3 (doesn't work)
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
    document.body.appendChild(document.createElement("div"));
}

例1显然是一个无限循环。每次迭代，它都会重新检查页面中div的数量。

示例2的工作方式与预期一样，因为节点列表已经被缓存(当然，最好直接缓存长度)。

例3看起来像例2。许多人希望它以同样的方式工作，因为缓存了nodelist。但当诗人活着的时候，这实际上是另一个无限循环。这让一些人措手不及。

另外，如果函数返回静态节点列表，则可以在每次需要时重新查询DOM。这比将活动列表转换为静态列表更简单。

live NodeList检索速度更快，因此它们性能更高
静态节点列表是少性能。

通过eg看到差异。between querySelector (querySelectorAll) and getElementById

在相同的条件下，getElementsByTagName比querySelectorAll更好…

至少我是从微软官方培训指南"用JavaScript和CSS3编程HTML5"中读到的…

相关文章：