无法修改DOM元素的类

Can not modify classes of DOM elements

本文关键字：元素 DOM 修改      更新时间：2024-04-27

我在页面中有以下元素：

<div class="cl1 cl2"></div>
<div class="cl1 cl2"></div>
<div class="cl1 cl2"></div>

当我运行此代码时：

<script>
    var elems = document.getElementsByClassName("cl1");
    for (var i = 0; i < elems.length; i++) {
        console.log(i + ": " + elems[i].className);
    }
</script>

我可以看到：

0 cl1 cl2
1 cl1 cl2
2 cl1 cl2

在控制台中。

但是这个代码：

<script>
    var elems = document.getElementsByClassName("cl1");
    for (var i = 0; i < elems.length; i++) {
        console.log(i + ": " + elems[i].className);
        elems[i].className = 'cl3'; // or = '' (removing all classes)
    }
</script>

给出：

0 cl1 cl2
1 cl1 cl2

首次运行时，以及：

0 cl1 cl2

第二次跑步。

没有修改所有元素的原因是什么？当我们触摸elems[i].className时，我可以看到elems.length正在减少，但原因是什么？

如果我们放置var n = elems.length并用i < n改变循环，我们将得到Cannot read property 'className' of undefined错误。

问题是如何从第一次开始修改所有的类？

因为我认为以下代码看起来很傻：

var elems = document.getElementsByClassName("cl1");
while (elems.length) {
    for (var i = 0; i < elems.length; i++) {
        console.log(i + ": " + elems[i].className);
        elems[i].className = 'cl3';
    }
    elems = document.getElementsByClassName("cl1");
}

问题是items是一个活动NodeList，这意味着无论何时访问items.length，都会重新评估该列表。删除元素时，列表会变短，但保留索引。

您可以先将NodeList转换为数组

    var items = [].slice.call(doc.getElementsByClassName('foo'));

当您删除DOM元素时，数组大小不会改变。

getElementsByClassName函数返回NodeList，而不是数组。NodeList对象是活动的—他们跟踪DOM的变化。（edit—事实证明，并非所有NodeList对象都是活动的，但从该函数返回的对象是活动的。）

当您更改第一个元素的类时，它将不再是元素列表的一部分。因此，当你增加"i"时，你跳过了一个。

您可以将NodeList对象转换为数组（请参阅@ama2的答案），也可以不更改从所选集合中删除元素的"i"。

相关文章：