星途面试题库

面试题：JavaScript 中批量修改 DOM 样式的常规方法

请阐述在 JavaScript 中，使用原生 DOM API 批量修改一组 DOM 元素样式的常见方法，并给出一个简单示例，例如将页面上所有 class 为 'box' 的元素的背景颜色改为红色。

43.4万热度

难度

编程语言JavaScript

知识考点

AI 面试

面试题答案

常见方法

使用 querySelectorAll 获取元素集合，然后遍历集合修改样式：通过 document.querySelectorAll 方法可以获取符合指定选择器的所有元素，返回一个静态的 NodeList。遍历这个 NodeList，为每个元素设置所需样式。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <script>
        const boxes = document.querySelectorAll('.box');
        for (let i = 0; i < boxes.length; i++) {
            boxes[i].style.backgroundColor ='red';
        }
    </script>
</body>

</html>

使用 getElementsByClassName 获取元素集合，然后遍历集合修改样式：document.getElementsByClassName 方法返回一个实时的 HTMLCollection，包含了所有指定类名的元素。同样遍历这个集合来修改样式。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <script>
        const boxes = document.getElementsByClassName('box');
        for (let i = 0; i < boxes.length; i++) {
            boxes[i].style.backgroundColor ='red';
        }
    </script>
</body>

</html>

在现代 JavaScript 中，querySelectorAll 由于其更强大的选择器支持，使用更为广泛，但 getElementsByClassName 在某些简单场景下也能很好地完成任务。