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

Question

我通常会听到,因为实时NodeLists是"坏" (参见这篇Zakas文章),并且通知了querySelectorAll返回静态的决定HTMLCollection.为什么人们认为实时NodeLists是一件坏事？代码示例可能有助于我理解这一点.

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

我完全理解用CSS Selector字符串选择元素有多么有用,但如果我只能在获取它后立即可靠地运行代码,那么它似乎比live更有用NodeList.

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.这可以说比将实时列表转换为静态更简单.