Question

我有一个HTML元素列表，其中包含“black”类（以及其他一些类）。我想将“黑色”转换为“白色”。我写了以下代码。

var blacks = document.getElementsByClassName("black");
for (i = 0; i < blacks.length; i++)
    blacks[i].className = blacks[i].className.replace('black', 'white');

有趣的是，一个元素变为白色，一个元素被跳过，直到元素结束。也就是说，具有偶数序的元素保持不变。转换所有黑人我错过了什么？

Answer 1

document.getElementsByClassName会返回live NodeList，当您对其所代表的部分DOM进行更改时，会自动更新该{{3}}。您将其视为静态列表。您可以通过将其转换为数组来实现：

var blacks = [].slice.call(document.getElementsByClassName("black"));

我刚想到你也可以：

var blacks = document.querySelectorAll(".black"); //NodeList but static

Answer 2

除了关于blacks作为实时nodeList的评论之外，你可以通过简单地减少循环来避免转换为数组：

var blacks = document.getElementsByClassName("black");
for (var i = blacks.length -1 ; i >= 0; --i) {
    blacks[i].className = blacks[i].className.replace('black', 'white');
}

JS Fiddle demo

对于循环，每次迭代后跳过一次

2 个答案: