javascript - 更改某些元素的类名

Question

我想将类 hidden 的所有元素更改为类 appeared。这是我的代码:

e = document.getElementsByClassName("hidden");
for (i = 0; i < e.length; i++) {
    e[i].className = "appeared";
}

具有名为 hidden 的类的三个元素中的两个已更改。这是为什么？如何解决？我尝试使用 getElementById，它有效，但我需要使其通用，以便我可以将它用于许多元素和许多类。

编辑

原来有一个线程有类似的问题。我将代码更改为此并且它有效:

e = document.getElementsByClassName("hidden");
while (e.length) {
    e[0].className = "appeared";
}

Answer 1

问题是 getElementsByClassName 返回一个 NodeList，它是一个 live collection .因此，每次您询问其长度时，都会重新计算该集合。由于您已经更改了某些元素的类名，因此循环比您预期的更早结束。

如果您检查每个循环的 i 和 length 的值，您将拥有:

• 第一次，长度为 3。(0 < 3) 为 true，因此它改变了它的类。
• 第二次，长度为 2。(1 < 2) 为 true，因此它改变了它的类。
• 第一次，长度为1。(2 < 1)为false。它不会改变它的类别。

您应该将 NodeList 转换为数组:

var e = [].slice.call(document.getElementsByClassName("hidden"));

或者您可以使用您提供的替代代码，尽管在这种情况下，每次您请求其长度属性时都会重新计算选择。