javascript - 更改 className 问题(javascript 和 IE)

Question

以下 JavaScript 代码无法正常工作。 (我使用的是 IE9，无法使用其他浏览器或 JQuery):

var elems = document.getElementsByClassName("EditableTextBox");
for (var i = 0; i < elems.length; i++) {                
    elems[i].className = "Zero";
}

发生的情况是，只有一些 className“EditableTextBox”的元素更改为 className“Zero”，许多元素仍保留 className“EditableTextBox”。没有其他代码可能导致此问题；这段代码是我在屏幕刷新之前执行的最后一段代码。

我认为问题在于 .getElementsByClassName 没有找到所有正确的元素，但是:

var elems = document.getElementsByClassName("EditableTextBox");
for (var i = 0; i < elems.length; i++) {                
    elems[i].value = "test";
}

此代码确实将所有正确元素的值更改为“test”，因此 .getElementsByClassName 确实可以正确找到所有元素。

我不明白是什么导致了这里的问题。我的解决方法如下，但是任何有更多经验的人都可以解释一下为什么第一 block 代码不起作用吗？谢谢。

如果有人感兴趣，我的解决方法:

var elems = document.getElementsByTagName("input");
for (var i = 0; i < elems.length; i++) {
    if (elems[i].className == "EditableTextBox")
       elems[i].className = "Zero";

谢谢。

Answer 1

getElementsByClassName 似乎返回一个实时集，因此当您更改任何项目的类时，该集会立即更新，并且它将跳过其他项目。相反，执行相反的循环:

for (var i = elems.length - 1; i >= 0; --i) {                
    elems[i].className = "Zero";
}