Question

我有一个包含3行的表。每行都有一个类：.myClass。

然后我使用document.getElementsByClassName('myClass')查询表行并迭代元素，将每行的类更改为.otherClass。

然而，

console.log(document.getElementsByClassName('otherClass'))

只返回一行。

而且，当我查看DOM时，只有第一个.myClass行将其类更改为.otherClass;另一个保持不变。

如何将所有.myClass行的类更改为.otherClass？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

与其他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：

HTML DOM中的HTMLCollection是实时的;当基础文档发生变化时，它会自动更新。

要回答你的问题的上下文，你可以设置第一个元素的className，直到集合中没有剩下：

while(x.length > 0) {
   x[0].className = 'otherClass';  
}

Answer 2

作为georg pointed out in his answer，getElementsByClassName会返回"live"个集合。这意味着当元素发生变化时，数组将“更新”。

要解决您的问题，您应该使用while循环，在x.length存在时进行迭代，并且仅更改HTMLCollection的第一个元素。

var c = document.getElementsByClassName('myTable')[0];
var x = c.getElementsByClassName('myClass');
while (x && x.length) {
  x[0].className = 'otherClass'
}
var y = c.getElementsByClassName('otherClass'); 
alert(y.length);

.myClass {
  display:block;
  background-color: red;
}
.otherClass {
  display:block;
  background-color:green;
}

<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>

Answer 3

格奥尔格是对的。 Elements数组会随时更新，因此您无法依赖它的长度;

试试这段代码：

var c = document.getElementsByClassName('myTable')[0],
    x = c.getElementsByClassName('myClass');

while (x.length) {
    x[0].className = 'otherClass';
}
var y = c.getElementsByClassName('otherClass');
alert(y.length);

Working fiddle

Answer 4

另一个选项是使用元素填充普通数组，然后遍历此数组。您将能够以这种方式获得元素的类名。

如何更改document.getElementsByClassName检索的所有元素的类

4 个答案: