为什么我不能更改已定义元素的类名

Question

我只是想删除一类没有像 jQuery 这样的框架的一些元素。 首先我尝试使用 for(... in ...) 而不是将 ist 更改为 for(var i...) 但现在我发现即使直接选择也不起作用。

使用 jQuery 可以正常工作。但它是......让我们来解释一下 jQuery 的作用。

我的脚本：

[109] <script>
[110]   var hidden = document.getElementsByClassName('hidden');
[111]   console.log('Class "hidden" size: ' + hidden.length);
[112]   console.log(hidden[0].tagName);
[113]   console.log(hidden[1].tagName);
[114]
[115]   hidden[0].className = '';
[116]   hidden[1].className = '';
[117] </script>  

控制台日志：

Class "hidden" size: 2
H1
FORM
Uncaught TypeError: Cannot set property 'className' of undefined(anonymous function) @ login.html:116

为什么我可以得到hidden[1] 的tagName 但不能改变它的className 而是hidden[0]。

当我将订单更改为

[115]   hidden[1].className = '';
[116]   hidden[0].className = '';

所以hidden[1] 在hidden[0] 之前它可以工作。

看起来var hidden = document.getElementsByClassName('hidden'); 将在第一个选定元素已更改并且元素的length 变小时后再次运行。

Answer 1

getElementsByClassName 返回一个 live NodeList，这意味着它包含的元素会随着 DOM 的变化而变化。您从该集合中的元素中移除相关的类名，该元素将自动从集合中移除。

因此，您应该向后迭代元素：

for ( var i = hidden.length - 1; i > -1; i-- ) {
  hidden[ i ].className = '';
}

在第一次迭代中，集合将包含 2 个元素（索引为 0 和 1）。您从索引 1 处的元素中删除该类，并且该元素将从集合中删除。在下一次迭代中，集合中只剩下一个元素，但由于 i 已递减为 0，您可以正确引用它。

编辑

根据 cmets 的建议，您还可以反复修改 hidden[0]：

while ( hidden.length ) {
  hidden[ 0 ].className = '';
}