javascript - 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";
}  

我收到错误。代码在某个时候跳出循环，没有完成任务，消息为“无法将 className 设置为 null”。
我知道这是静态 vs 实时节点列表问题(我认为)，但由于 gEBCN 快得多而且我需要遍历巨大的节点列表(树)，我真的很想使用 getElementsByClassName。
我可以做些什么来坚持使用 gEBCN 而不是被迫使用 querySelectorAll？

Answer 1

那是因为 getElementsByClassName 返回的 HTMLCollection 是活的。

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

反之亦然:如果您删除 temp 中某个元素的 "class" 类，它将不再存在。

因此，更改类会重新索引集合并更改其长度。所以问题是你迭代它预先捕获它的长度，而不考虑索引的变化。

为避免此问题，您可以:

• 使用非实时集合。例如，

  var temp = document.querySelectorAll(".class");
  

• 将实时 HTMLCollection 转换为数组。例如，其中一个

  temp = [].slice.call(temp);
  temp = Array.from(temp); // EcmaScript 6
  

• 向后迭代。例如，参见 @Quentin's answer .

• 考虑指数的变化。例如，

  for (var i=0; i<temp.length; ++i) { 
   temp[i].className = "new_class";
   --i; // Subtract 1 each time you remove an element from the collection
  }
  

  while(temp.length) { 
   temp[0].className = "new_class";
  }