javascript - 为什么我不能更改已定义元素的 className

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 hide = 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，因此您可以正确引用它。

编辑

根据评论中的建议，您还可以重复修改hidden[0]:

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