javascript - For 循环在每个其他迭代之后跳过一个

Question

我有一个具有“黑色”类（以及其他一些类）的 HTML 元素列表。我想将“黑色”转换为“白色”。我已经编写了以下代码。

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返回一个liveNodeList，当您更改它所代表的部分 DOM 时会自动更新。您将其视为静态列表。您可以通过将其转换为数组来做到这一点：

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

我突然想到你也可以：

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

Answer 2

除了关于blacks成为活动节点列表的评论之外，您可以通过简单地通过循环递减来避免转换为数组：

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

JS 小提琴演示。