奇怪的for循环行为

Strange for loop behavior

本文关键字：循环 for      更新时间：2023-09-26

下面的代码没有从节点列表中删除每个节点的"class"属性。我错过什么了吗?

HTML 

<button class="choice"></button>
<button class="choice"></button>
<button class="choice"></button>
<button onclick="removeAttr()">REMOVE ATTRIBUTES</button>

Javascript 

function removeAttr() {
    var i, buttons = document.getElementsByClassName('choice');
    for (i = 0; i < buttons.length; i++) {
        buttons[i].removeAttribute('class');
    }
}

然而，几次点击后，你会得到你想要的结果，但我不明白为什么…

.getElementsByClassName()返回一个活动的NodeList。这意味着当您删除类时，这些元素将不再在NodeList中。

你可以通过向后循环来解决这个问题。

function removeAttr() {
    var i, l, buttons = document.getElementsByClassName('choice');
    for (i = 0, l = buttons.length - 1; i >= 0; --i) {
        buttons[i].removeAttribute('class');
    }
}

或者你可以使用while循环。

function removeAttr() {
    var buttons = document.getElementsByClassName('choice');
    while(buttons.length) buttons[0].removeAttribute('class');
}

或者您可以使用返回静态NodeList的选择方法，如.querySelectorAll() 

function removeAttr() {
    var i, buttons = document.querySelectorAll('.choice');
    for (var i in Object.keys(buttons)) {
        buttons[i].removeAttribute('class');
    }
}
相关文章：