對於循環跳過一個接一個的迭代

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

繼評論做出有關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 Fiddle demo。

Answer 2

document.getElementsByClassName返回一個live NodeList，它會在您對其所代表的DOM的一部分進行更改時自動更新。你把它當作一個靜態列表來對待。你可以通過將其轉換爲數組：

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

它只是發生在我身上，你還可以：

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