为什么 getElementsByClassName() 只更改其他所有元素的类？

HTMLCollection 的 ClassName 问题

在 JavaScript 代码中，您使用 getElementsByClassName() 来选择类为“block-default”的元素”。然而，正如您所注意到的，该类仅针对每个其他元素进行更改。

问题在于 getElementsByClassName() 返回的 HTMLCollection 的性质。它是反映 DOM 当前状态的实时集合。当您更改元素的类名称时，它将从集合中删除，使其无法进一步选择。

解决方案：迭代方法

要解决此问题，您可以遍历 HTMLCollection 并单独更改每个元素的类名称。通过这样做，您将确保每个元素都会收到更新的类：

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

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

替代解决方案：仅更改第一个元素

或者，您可以修改第一个元素的类名，因为即使其类发生更改，它仍保留在集合中。修改后的代码如下：

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

这样，您只需更新第一个元素的类名，HTMLCollection 仍将包含所有具有“块选择”类的元素。

注意：对于 getElementsByClassName() 可能返回许多元素的实际场景，迭代元素是更好的解决方案并且需要对它们全部进行操作。

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