Javascript 奇怪的循环行为

下面的代码不能从nodelist中删除每个节点的“class”属性。我错过什么了吗

HTML

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

---

但是，单击几下后，您将得到想要的结果，但我不明白为什么…

。getElementsByClassName（）

返回一个活动节点列表。这意味着，当您删除类时，这些元素将不再位于节点列表中

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

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');
}

或者可以使用返回静态节点列表的选择方法，如

.querySelectorAll（）

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

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