getElementsByClassName - 奇怪的行为

Question

首先,抱歉我的英语不好......

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

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

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

不能正常工作,在这里演示,[在chrome 25和FF],所以我采用了循环系数:

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

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

这很好用!似乎被称为"推",并且不需要系数......这是正常的吗？它与我见过的例子不同.

提前致谢!

Answer 1

发生了什么是奇怪的副作用.当您className为每个元素重新分配时elements,元素将从数组中删除!(实际上,正如@ user2428118指出的那样,elements是一个类似于数组的对象,而不是数组.请参阅此主题以了解其中的区别.)这是因为它不再具有classOne类名.循环退出时(在第二种情况下),elements数组将为空.

您可以将循环编写为:

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

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

顺便提一句,这是个好问题.经过精心研究和清晰.

Answer 2

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