从 getElementsByClassName 迭代 HTMLCollection 时的奇怪行为

Question

我写了一个函数来改变元素的类来改变它们的属性。 出于某种原因，只有一些元素发生了变化。 我花了几个小时才找到解决方案，但对我来说似乎很奇怪。 或许你可以向我解释一下。

这不起作用：

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i++) {
    elements[i].className = 'classTwo';               
  }
}

请参阅 JSFiddle ：仅每隔一个项目受到影响； 只有每隔一个红色元素就会将颜色变为蓝色。

因此，我将for循环的最终表达式更改为不再增加i ：

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i) { // Here’s the difference
    elements[i].className = 'classTwo';               
  }
}

这很好用！ 似乎调用了push并且不需要增量。 这是正常的吗？ 这与我见过的例子不同。

Answer 1

正在发生的是一个奇怪的副作用。 当您为elements每个元素重新分配className ，该元素将从数组中删除！ （实际上，正如@ user2428118 指出的那样， elements是一个类数组对象，而不是数组。请参阅此线程以了解区别。）这是因为它不再具有classOne类名。 当您的循环退出时（在第二种情况下）， elements数组将为空。

您可以将循环编写为：

while (elements.length) {
    elements[0].className = 'classTwo'; // removes elements[0] from elements!
}

在您的第一种情况下，通过增加i ，您将跳过具有classOne类的（原始）元素的classOne 。

顺便说一句，很好的问题。 仔细研究和清楚。

Answer 2

getElementsByClassName返回一个 NodeList。 NodeList 集合是一个实时集合，这意味着文档的修改会影响集合。 更多的

Answer 3

或者恢复循环，从 length-1 开始，然后逐步降低到 0