Question

我在我的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是一个LIVE LIST ...通过更改类，你可以在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

Javascript：getElementsByClassName没有给出所有元素

1 个答案: