3

我通常听说这是因为实时 NodeLists 是“坏的” （请参阅​​这篇 Zakas 文章），并且决定querySelectorAll返回一个 static HTMLCollection。为什么人们认为实时 NodeList 是一件坏事？代码示例可能会帮助我最好地理解这一点。

如果每当我关心使用缓存的节点集合的值进行任何计算时，该集合恰好不是过时的快照，我真的不能将其视为“坏”的事情。

我确切地了解使用 CSS Selector 字符串选择元素有多么有用，但如果我只能在获取该集合后可靠地运行代码，它似乎比 live NodeList.

4

2 回答 2

8

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

考虑一个将页面中的 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。许多人希望它以相同的方式工作，因为节点列表是缓存的。但是由于节点列表是实时的，它实际上是另一个无限循环。这会抓住一些人。

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

于 2013-06-30T09:53:57.233 回答
0

实时NodeList 检索速度更快，因此它们的性能更高
静态NodeList性能较差。

通过例如查看差异。( querySelectorAll querySelector) 和getElementById

在相同条件下getElementsByTagName使用比querySelectorAll...

至少我从微软官方培训指南“使用 JavaScript 和 CSS3 进行 HTML5 编程”中读到...

于 2013-10-15T16:45:32.540 回答