JavaScript HtmlCollection循環永遠不會返回第二個元素

Question

我知道有關於如何訪問和遍歷HtmlCollection的答案，但它只是在我這裏不起作用：
我得到了類「tabSheetActive」的一些元素，這些數量可以是1或更多。
我訪問他們：

var activeTabSheets = document.getElementsByClassName('tabSheetActive'); 
console.log('Active sheets amount: ' + activeTabSheets.length); // outputs 2 

日誌收集輸出以下：

[div.tabSheetActive.sheet_512_0, div.tabSheetActive.sheet_512_0] 

我試圖在它們之間迭代和操縱自己的班級這樣之後：

for (var i = 0; i < activeTabSheets.length; i++) { // just iterates one time 
    var activeTabSheet = activeTabSheets[i]; 
    console.log("Index: " + i); // outputs 0 
    console.log(activeTabSheet); // outputs first element 
    var newClassName = activeTabSheet.className.replace('tabSheetActive', 'tabSheet'); 
    activeTabSheet.className = newClassName; 
} 

[].forEach.call(activeTabSheets, function(activeTabSheet) { //code here });的技巧對我無效。它只是迭代一次。
它一定是一件非常愚蠢的事情，但我一直在調試，並在這幾個小時裏把我的頭髮扯出來。

Answer 1

getElementsByClassName返回一個活 HTMLCollection。

這條線：

activeTabSheet.className.replace('tabSheetActive', 'tabSheet'); 

停止的第一個項目在列表中從作爲類的成員。因此它被刪除，其他所有內容都被清理掉（因此索引1處的元素移動到索引0處）。

---

爲了解決這個問題，你可以：

• 使用querySelectorAll它在的HTMLCollection 向後
• 使用while環路返回非現場節點列表
• 循環，測試長度爲的HTMLCollection，並且始終修改索引0。
• 所有的值複製到一個數組遍歷是