getElementsByClassName对querySelectorAll

Question

如果我用

var temp = document.querySelectorAll(".class");
for (var i=0, max=temp.length; i<max; i++) { 
 temp[i].className = "new_class";
}

一切都很好。所有节点都更改它们的类。但是，对于gEBCN：

var temp = document.getElementsByClassName("class");
for (var i=0, max=temp.length; i<max; i++) { 
 temp[i].className = "new_class";
}  

我搞错了。代码在某个时候跳出循环，没有用msg完成作业“不能设置空的className”。

我知道这是静态的和活的节点列表问题(我认为)，但是由于gEBCN要快得多，而且我需要遍历大量的节点列表(树)，所以我真的很想使用getElementsByClassName。

我能做些什么来坚持使用gEBCN而不被迫使用querySelectorAll吗？

Answer 1

向后循环列表，然后元素将从末尾消失(在这里，您不再查看)。

for (var i = temp.length - 1; i >= 0; i--) { 
  temp[i].className = "new_class";
}  

但是，请注意，IE8支持querySelectorAll，但不支持getElementsByClassName，因此您可能希望使用querySelectorAll来获得更好的浏览器支持。

或者，不要删除现有的类：

for (var i=0, max=temp.length; i<max; i++) {  
  temp[i].className += " new_class";
}  

Answer 2

这是因为由HTMLCollection返回的getElementsByClassName是实时的。

这意味着如果将"class"添加到某个元素的classList中，它将神奇地出现在temp中。

oposite也是正确的:如果删除"class"类中的元素在temp中，它将不再存在。

因此，更改类将重新索引集合并更改其长度。所以问题是，你迭代它之前，捕捉它的长度，而没有考虑到索引的变化。

为了避免这个问题，您可以：

• 使用非现场收集。例如, var temp = document.querySelectorAll(".class")；
• 将活动的HTMLCollection转换为数组。例如，使用其中一个 temp = [].slice.call( temp )；temp= Array.from(temp)；// EcmaScript 6
• 向后迭代。例如，请参见@Quentin的答复。
• 考虑到指数的变化。例如, 对于(var i=0；iwhile(temp.length) { temp.className = "new_class"；}