javascript - JavaScript HtmlCollection循环从不返回第二个元素

我知道有关于如何访问和遍历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 });的技巧对我也不起作用。它只迭代一次。
一定是真的很愚蠢，但是我已经调试了好几个小时了。

最佳答案

getElementsByClassName返回实时HTMLCollection。

这行：

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

阻止列表中的第一项成为该类的成员。因此，它被删除，其他所有东西都被拖移（因此，位于索引1处的元素移至索引0）。



要解决此问题，您可以：


使用querySelectorAll返回不活动的NodeList
向后循环遍历HTMLCollection
使用while循环，测试HTMLCollection的长度，并始终修改索引0。
在循环遍历之前，将所有值复制到数组中

关于javascript - JavaScript HtmlCollection循环从不返回第二个元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30506113/