JavaScript HtmlCollection 循环从不返回第二个元素答案

【问题标题】：JavaScript HtmlCollection loop never returns second elementJavaScript HtmlCollection 循环从不返回第二个元素
【发布时间】：2015-05-28 12:05:39
【问题描述】：

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

【问题讨论】：

标签： javascript loops htmlcollection

【解决方案1】：

getElementsByClassName 返回一个 live HTMLCollection。

这一行：

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

阻止列表中的第一项成为该类的成员。因此，它被删除，其他所有内容都被洗牌（因此位于索引 1 的元素移动到索引 0）。

要解决这个问题，您可以：

使用querySelectorAll，它返回一个非活动节点列表
循环遍历 HTMLCollection向后
使用while 循环，测试HTMLCollection 的长度，并始终修改索引0。
在遍历 that 之前将所有值复制到一个数组中

【讨论】：

我会试试这些，“我会回来的”——一直想说这个。