我有一个包含3行的表.每行都有类：.myClass.
然后,我使用document.getElementsByClassName(‘myClass’)查询表行,并迭代元素,将每行的类更改为.otherClass.
然而,
console.log(document.getElementsByClassName('otherClass'))
只返回一行.
而且,当我查看DOM时,只有第一个.myClass行将其类更改为.otherClass;另一个保持不动.
如何将所有.myClass行的类更改为.otherClass？
var c = document.getElementsByClassName('myTable')[0];
var x = c.getElementsByClassName('myClass');
for (var i = 0; i < x.length; i++) {
x[i].className = 'otherClass';
}
x = c.getElementsByClassName('otherClass');
console.log(x); // only one element
<table class="myTable">
<tr class="myClass2">
<td>Content</td>
<td>Content</td>
</tr>
<tr class="myClass">
<td>Content</td>
<td>Content</td>
</tr>
<tr class="myClass">
<td>Content</td>
<td>Content</td>
</tr>
</table>
解决方法
与其他HTML集合一样,getElementsByClassName是“实时”的,也就是说,当您为其成员分配另一个类名时,它会立即从集合中删除,并且其长度会减少.这就是你的循环只运行一次的原因.
var x = document.getElementsByClassName('myClass');
alert("before: " + x.length);
x[0].className='otherClass';
alert("after: " + x.length);
.myClass { color: black }
.otherClass { color: red }
<b class="myClass">hi</b> <b class="myClass">hi</b>
Docs：
An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.
要回答您的问题,可以设置第一个元素的className,直到集合中没有剩余：
while(x.length > 0) {
x[0].className = 'otherClass';
}
