Strange for loop behavior

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. Это означает, что при удалении классов эти элементы больше не будут в 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'); 
    } 
}