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可以正确找到所有元素。

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

我的解决方法以防任何人感兴趣：

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";
}

Answer 2

另一种选择是：

while(list.length!=0) {
    list[0].className = 'Zero';
}

这样你知道你不能错过一个元素。

更改className问题（javascript和IE）

2 个答案: