为什么使用 getElementsByClassName() 更改类名仅影响 JavaScript 中的所有其他元素？

className 更改其他类问题

问题

在 JavaScript 中， getElementsByClassName() 方法返回包含元素的 HTMLCollection共享指定的 CSS 类。但是，据观察，当对这些元素应用类更改时，只有备用类受到影响。

原因

出现此问题是因为 getElementsByClassName() 返回的 HTMLCollection 是实时集合。这意味着对 DOM 的任何更改（例如修改类名称）都会修改集合本身。

当修改 className 属性时，该元素将从集合中删除。这会导致集合的大小减小，并且随后尝试使用其索引访问同一元素可能会导致跳过备用元素。

解决方案

要解决此问题，有两种可能的方法解决方案：

1.仅修改第一个元素的 ClassName

不要遍历整个 HTMLCollection 并更改每个元素的 className，只需修改第一个元素的 className。

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

2.使用类似静态数组的数据结构

不要使用返回实时集合的 getElementsByClassName()，而是创建一个类似静态数组的数据结构。这可以通过使用 Array.from() 函数将 HTMLCollection 转换为常规数组来完成，或者手动创建一个数组并用 HTMLCollection 元素填充它。

const blockSetArray = Array.from(blockSet);

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

以上是为什么使用 getElementsByClassName() 更改类名仅影响 JavaScript 中的所有其他元素？的详细内容。更多信息请关注PHP中文网其他相关文章！