Javascript:getElementsByClassName 未给出所有元素

Question

这个问题已经有答案了:

Get All Elements By ClassName and Change ClassName (5 个回答)

已关闭 6 年前。

好吧，我将类名“消失”的表行放入我的 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

getElementsByClassName 返回的 HTMLCollection 是一个实时列表...通过更改类，您可以在 for 循环期间更改列表!

一种解决方案是将列表“复制”到数组

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