Question

我将document.getElementsByClassName（＆＃34; red＆＃34;）的结果分配给数组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>

Answer 1

那是因为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数组会发生更改

1 个答案: