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

Posted 2023-03-16

【中文标题】为啥我不能更改已定义元素的类名

【英文标题】：Why can't I change the className of a defined element为什么我不能更改已定义元素的类名

【发布时间】：2016-05-20 16:55:09

【问题描述】：

我只是想删除一类没有像 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 变小时后再次运行。

【参考方案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 = '';

【讨论】：

您是否也可以重复应用hidden[0].className = ''; 到第一个元素，直到没有元素？

@JosephYoung - 是的，这也行。我在答案中添加了该方法的示例。谢谢。

感谢您的解释！但是当我只使用一次document.getElementsByClassName('hidden')并将值写入变量时，为什么会发生这种情况？

@dede - 因为您只是将一个对活动 NodeList 的引用分配给一个变量。作业没有做任何特别的事情。