gpt4 book ai didi

当 DOM 改变时 JavaScript 数组也会改变

转载 作者:行者123 更新时间:2023-11-28 06:47:04 25 4
gpt4 key购买 nike

我将 document.getElementsByClassName("red") 的结果分配给数组 redElements。然后,我将一个元素从 .red 类更改为 .blue 类。我希望 redElements 保留其原始的三个值,但它现在只包含仍然是红色的两个元素。这令人惊讶。这是什么原因呢?我应该查找什么才能详细了解为什么会发生这种情况?

<!DOCTYPE html>
<html>
<head>
<style>
.red { color: red; }
.blue { color: blue; }
</style>
</head>
<body>

<span class="red">1</span>
<span class="red">2</span>
<span class="red">3</span>

<script>
var redElements = document.getElementsByClassName("red");
alert(redElements.length);
firstRedElement = redElements[0];
firstRedElement.className = "blue";
alert(redElements.length);
</script>
</body>
</html>

最佳答案

这是因为 className 函数将覆盖现有的类:
试试这个:

<script>
var redElements = document.getElementsByClassName("red");
alert(redElements.length);
firstRedElement = redElements[0];
firstRedElement.className = firstRedElement.className + " blue";
alert(redElements.length);
</script>

或者你甚至可以尝试:

firstRedElement.classList.add("blue");

关于当 DOM 改变时 JavaScript 数组也会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33321115/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com