javascript - 为什么这个 for() 循环不起作用？

Question

我有多个具有相同类名的元素。

我正在尝试一次更改每个元素的类名。

所以我尝试了这个js语句。

function chngeClass2(from, to){  //chngeClass() is change class name of an element, using its id.
    var before;
    before = document.getElementsByClassName(from);
    for(i=0,len=before.length ; i<len ; i++){
        before[i].className = to;
    }
}

chngeClass2('test', 'test_ani');

但它不起作用。

我不知道为什么。

为什么这段代码不起作用？有什么问题？

Answer 1

getElementsByClassName() 函数返回一个事件 DOM 节点列表。它是“实时的”意味着当您更改所涉及的元素时，列表也会发生变化。当您更改元素的类时，它不再在列表中!

您可以通过在更改任何元素之前将节点列表复制到普通数组中来处理该问题，或者简单地使用 while 循环迭代直到列表为空，只需查看第一个每次迭代的元素:

var before = document.getElementsByClassName(from);
while (before.length)
  before[0].className = to;

您可能还想添加一个测试以确保“to”不是包含类“from”的字符串，否则循环将永远不会终止。事实上，因为在像您这样的函数的一般情况下，很难弄清楚是否存在无限循环，所以使用数组复制方法可能更容易:

var before = document.getElementsByClassName(from);
before = [].slice.call(before, 0);
for (var i = 0; i < before.length; ++i)
  before[i].className = to;