如何让我的脚本循环并检查所有激活的按钮？香草js

要让脚本循环并检查所有激活的按钮，可以使用香草JavaScript（Vanilla JavaScript）来实现。以下是一个详细的步骤和示例代码：

基础概念

DOM（文档对象模型）：JavaScript通过DOM与HTML文档进行交互。
事件监听器：用于在特定事件发生时执行代码。
循环遍历元素：使用querySelectorAll方法获取所有匹配的元素，并通过循环遍历它们。

类型

按钮元素：通常使用<button>或<input type="button">标签。
激活状态：可以通过添加特定的类（如active）或使用其他属性来标识激活状态。

应用场景

用户界面交互：实时检查按钮状态，以便根据用户的操作做出响应。
自动化测试：模拟用户点击并验证按钮的行为。

示例代码

以下是一个示例，展示如何循环遍历所有按钮并检查它们的激活状态：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Check</title>
    <style>
        .active {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button class="active">Button 1</button>
    <button>Button 2</button>
    <button class="active">Button 3</button>

    <script>
        // 获取所有按钮元素
        const buttons = document.querySelectorAll('button');

        // 循环遍历每个按钮
        buttons.forEach(button => {
            // 检查按钮是否具有激活类
            if (button.classList.contains('active')) {
                console.log(`${button.textContent} is active.`);
            } else {
                console.log(`${button.textContent} is not active.`);
            }
        });
    </script>
</body>
</html>

解释

HTML部分：定义了三个按钮，其中两个带有active类。
CSS部分：为激活状态的按钮添加背景颜色。
JavaScript部分：
- 使用querySelectorAll('button')获取所有按钮元素。
- 使用forEach方法遍历每个按钮。
- 使用classList.contains('active')检查按钮是否具有激活类，并在控制台输出相应信息。