Question

我通常会听到这一点，因为实时NodeLists“不好”(see this Zakas article)并且通知了querySelectorAll返回静态HTMLCollection的决定。为什么人们认为实时NodeLists是一件坏事？代码示例可能有助于我理解这一点。

如果，每当我关心使用缓存的节点集合的值进行任何计算时，集合恰好不是一个陈旧的快照，我就不能真正看到它是一个“坏”的东西。

我完全理解用CSS Selector字符串选择元素会有多大帮助，但是如果我只能在获取它后立即可靠地运行代码，那么它似乎比live { {1}}。

Answer 1

实时节点列表并不错，但如果您不习惯它们，它们的行为可能会令人困惑。特别是如果你认为它们是数组（它们不是数组）

考虑一个将页面中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按预期工作，因为nodelist已经被缓存（当然，简单地缓存长度会更好）。

示例3看起来像示例2.许多人都希望它以相同的方式工作，因为节点列表是缓存的。但是由于节点列表是实时的，它实际上是另一个无限循环。这抓住了一些人。

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

Answer 2

直播 NodeList检索速度更快，因此效率更高
静态 NodeList 更少效果良好。

see the difference例如。在querySelector（querySelectorAll）和getElementById

之间

在相同的条件下getElementsByTagName比querySelectorAll ...

更好用

至少我从微软官方培训指南“用HTML和CSS3编写HTML5”中读到了......

如果我不需要结果列表中的CSS选择器的粒度，为什么我会想要在“实时”NodeList上使用静态NodeList / HTMLCollection？

2 个答案: