首页 >web前端 >css教程 >为什么 getElementsByClassName() 只更改其他所有类?

为什么 getElementsByClassName() 只更改其他所有类?

Susan Sarandon
Susan Sarandon原创
2024-11-27 18:57:12223浏览

Why Does getElementsByClassName() Only Change Every Other Class?

不需要的类更改模式:受影响的所有其他类

在 JavaScript 中使用 getElementsByClassName() 时,您面临着挑战。当尝试更改每个元素的类时,您会遇到仅修改所有其他类的问题。

根本原因:HTMLCollection 的修改

根本原因此问题在于 getElementsByClassName() 返回的 HTMLCollection 的性质。当您更改集合中元素的类时,集合本身也会更新,并且不再包含该元素。这意味着当您迭代集合时,您实际上会跳过替代元素。

解决方案:迭代数组

要解决此问题,您可以迭代原始集合的数组,而不是在继续时修改集合。这可确保您将类更改应用于每个元素,而不管以前的修改如何。

使用 For 循环更新代码:

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

for (var i = 0; i < blockSetLength; i++) {
    blockSet[0].className = "block-selected";
}

注释:

  • 您可以使用 for 循环来代替单独更改每个元素的类迭代元素并更改类。
  • 此更新的代码将每次迭代的“块选择”类分配给 blockSet 数组的第一个元素。
  • 通过使用数组,您可以避免在迭代期间修改集合的问题。

以上是为什么 getElementsByClassName() 只更改其他所有类?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn