javascript - 如果我不需要结果列表中 CSS 选择器的粒度，我为什么要在 "live"NodeList 上使用静态 NodeList/HTMLCollection？

Question

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

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

我完全理解使用 CSS 选择器字符串选择元素有多大用处，但是如果我只能在获取该集合后立即针对该集合可靠地运行代码，它似乎比实时 节点列表。

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 按预期工作，因为节点列表已经缓存(当然，简单地缓存长度会更好)。

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

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