javascript - 为什么以及何时 for 循环忽略 html 集合中的某些项目

Question

我附上了一个codepen示例:http://codepen.io/anon/pen/zpmjJ

我只是尝试使用经典循环更改 html 集合数组的类名，经过多次测试后我无法弄清楚出了什么问题，如果我犯了一个常见错误，我总是忽略一项。

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>

bout.addEventListener("click",function(){

   var newtest = document.getElementsByClassName('test');
     for (i=0; i < newtest.length; i++)
     {
         newtest[i].className="bob";
     }

 });

Answer 1

这里的问题是您正在使用 document.getElementsByClassName ，它会给您一个 live NodeList 。您应该使用 document.querySelectorAll('.test') 来代替。

var newtest = document.querySelectorAll('.test');
for (var i=0; i < newtest.length; i++) {
    newtest[i].className = "bob";
}

对于实时 NodeList 集合 newtest 是对动态更新的元素集合的引用(由 className test 索引)。因此，在第一次循环迭代之后，当您用 bob 覆盖 className 时，整个集合会变小一(因为 newtest[0] 不再具有类 test >)。它使指数发生变化。

您的代码还有一个问题:不要忘记 var 关键字。

演示:http://codepen.io/anon/pen/BAFyb