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。
• 所有的值复制到一个数组遍历是