從 getElementsByClassName 迭代 HTMLCollection 時的奇怪行為

Question

我寫了一個函數來改變元素的類來改變它們的屬性。 出於某種原因，只有一些元素發生了變化。 我花了幾個小時才找到解決方案，但對我來說似乎很奇怪。 或許你可以向我解釋一下。

這不起作用：

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

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

請參閱 JSFiddle ：僅每隔一個項目受到影響； 只有每隔一個紅色元素就會將顏色變為藍色。

因此，我將for循環的最終表達式更改為不再增加i ：

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

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

這很好用！ 似乎調用了push並且不需要增量。 這是正常的嗎？ 這與我見過的例子不同。

Answer 1

正在發生的是一個奇怪的副作用。 當您為elements每個元素重新分配className ，該元素將從數組中刪除！ （實際上，正如@ user2428118 指出的那樣， elements是一個類數組對象，而不是數組。請參閱此線程以了解區別。）這是因為它不再具有classOne類名。 當您的循環退出時（在第二種情況下）， elements數組將為空。

您可以將循環編寫為：

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

在您的第一種情況下，通過增加i ，您將跳過具有classOne類的（原始）元素的classOne 。

順便說一句，很好的問題。 仔細研究和清楚。

Answer 2

getElementsByClassName返回一個 NodeList。 NodeList 集合是一個實時集合，這意味着文檔的修改會影響集合。 更多的

Answer 3

或者恢復循環，從 length-1 開始，然后逐步降低到 0