javascript - 从 getElementsByClassName 迭代 HTMLCollection 时的奇怪行为

Question

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

这不起作用:

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

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

See the 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 是一个类数组对象，而不是一个数组。请参阅this thread 了解不同之处。)这是因为它不再具有 classOne 类名。当循环退出时(在第二种情况下)，elements 数组将为空。

您可以将循环编写为:

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

在您的第一种情况下，通过递增 i，您将跳过一半具有类 classOne 的(原始)元素。

顺便提一下，这是个好问题。研究充分且清晰。