Javascript: getElementsByClassName не давая все элементы

Question

Ну я положил tablerows с именем класса «ушедшим» в моем Html так:

<tr class="gone"> 
     <th>text</th> 
     <td>text</td> 
    </tr> 
    <tr class="gone"> 
     <th>text</th> 
     <td>text</td> 
    </tr> 
    <tr class="gone"> 
     <th>text</th> 
     <td>text</td> 
    </tr> 
    <tr class="gone"> 
     <th>text</th> 
     <td>text</td> 
    </tr> 
    <tr class="gone"> 
     <th>text</th> 
     <td>text</td> 
    </tr> 
    <tr class="gone"> 
     <th>text</th> 
     <td>text</td> 
    </tr> 

и когда я получаю мои элементы в JavaScript с этим кодом:

var arrayelements=document.getElementsByClassName('gone'); 
var arrlength=arrayelements.length; 
for(var i=0;i<arrlength;i++){ 
    arrayelements[i].setAttribute("class","there"); 
    console.log(arrayelements); 
} 

возвращаемого значение моего console.log является

> <tr class="there">...</tr> 
> <tr class="there">...</tr> 
> <tr class="there">...</tr> 
> undefined 

в следующий раз я запустить его результат

> <tr class="there">...</tr> 
> <tr class="there">...</tr> 
> undefined 

я не понимаю, почему это вдруг неопределенными

Answer 1

HTMLCollection возвращаемый getElementsByClassName является ЖИВОЙ СПИСОК ... путем изменения класса, вы измените список во для цикла!

Одним из решений является «копией» список в массив

var arrayelements=Array.prototype.slice.call(document.getElementsByClassName('gone')); 
var arrlength=arrayelements.length; 
for(var i=0;i<arrlength;i++){ 
    arrayelements[i].setAttribute("class","there"); 
    console.log(arrayelements); 
} 

Другой метод должен был бы начаться в конце списка и работать в обратном направлении

var arrayelements=document.getElementsByClassName('gone'); 
var arrlength=arrayelements.length; 
for(var i=arrayelements.length-1;i>=0;i--){ 
    arrayelements[i].setAttribute("class","there"); 
    console.log(arrayelements); 
} 

или другой - всегда работает на первом элементе, видя, что вы всегда сокращаете длину

var arrayelements=document.getElementsByClassName('gone'); 
while(arrayelements.length) { 
    arrayelements[0].setAttribute("class","there"); 
} 

Я бы рекомендовал завершите первое, как проще всего работать, и избегайте последнего метода: p