For循环只在尝试从元素中删除类时迭代一次

Question

在Javascript中,我有一个函数,应该在页面上找到具有"connected"类的元素,并且当单击一个按钮时,将清除这些元素的类.我写了这段代码:

var prev_connected = document.getElementsByClassName("connected");
if (prev_connected.length > 0) {
    for (var j = 0; j < prev_connected.length; j++) {
        prev_connected[j].removeAttribute("class");
    }
}

但是,它只删除页面上第一个"connected"元素的class属性.当我有两个"连接"元素时,我已经确认"prev_connected"数组确实包含2个值,但由于某种原因,for循环永远不会到达第二个.有什么我做错了吗？谢谢.

Answer 1

的结果getElementsByClassName是实时的，这意味着当您删除类属性时，它也会从结果中删除该元素。使用得到querySelectorAll更广泛的支持，并返回静态 NodeList。

此外，您可以使用 for...in 循环更轻松地迭代列表。

我不建议仅仅为了使其静态而制作实时列表的额外副本，您应该使用返回静态 NodeList 的方法。

var prev_connected = document.querySelectorAll(".connected");
document.getElementById('demo').onclick = function() {
    for(var i in Object.keys(prev_connected)) { 
        prev_connected[i].removeAttribute("class");
    }
}

.connected {
  background: rgb(150,200,250);
}

<div class="connected">Hello</div>
<div class="connected">Hello</div>
<div class="connected">Hello</div>
<div class="connected">Hello</div>
<div class="connected">Hello</div>
<button id="demo">Remove the classes!</button>