我经常听到这样的说法,因为实时的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"中读到的…