奇怪的循環行爲

Question

下面的代碼deosn't從節點列表中刪除每個節點的「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'); 
    } 
} 

點擊幾下後，但是你會得到你想要的結果，但我不明白爲什麼...

Answer 1

.getElementsByClassName()返回直播節點列表。這意味着當你刪除類時，這些元素將不再存在於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'); 
} 

或者你可以使用它返回一個靜態節點列表像.querySelectorAll()

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

的選擇方法