JavaScript数组随着DOM的改变而改变

JavaScript array changes when DOM changes

本文关键字：改变 DOM 数组 JavaScript      更新时间：2023-09-26

我将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");
相关文章：