用DOM完成开灯关灯的操作

在JavaScript中，Document Object Model (DOM) 是一种处理HTML文档的标准方式，可以让我们动态地读取、修改和操作网页元素。如果你想通过DOM实现“开灯”和“关灯”的操作，通常会涉及以下几个步骤：

1. **获取元素**：首先，需要找到代表灯的HTML元素，例如一个`<button>`标签，假设其id为"light-switch"。

   const lightButton = document.getElementById("light-switch");

2. **添加事件监听器**：给这个按钮添加点击事件监听器，当用户点击时执行相应的操作。

   lightButton.addEventListener("click", function() {
     // 开灯或关灯的逻辑将放在这里
   });

3. **定义开灯和关灯的行为**：对于开灯，你可能想要改变相关元素的状态（比如更改颜色或显示文字），如果是模拟物理开关，则可能需要改变CSS样式。关灯则相反。这里我们可以创建两个函数分别表示这两种情况。

   function turnOnLight() {
     // 改变灯的状态，例如设置背景色为白色（开灯）
     lightButton.style.backgroundColor = "white";
     // 或者改变文本内容为"开"
     lightButton.textContent = "开";
   }

   function turnOffLight() {
     // 改变灯的状态，例如设置背景色为黑色（关灯）
     lightButton.style.backgroundColor = "black";
     // 或者改变文本内容为"关"
     lightButton.textContent = "关";
   }

4. **在事件处理器中调用相应函数**：

   lightButton.addEventListener("click", function() {
     if (/* 判断当前状态 */){
       turnOnLight();
     } else {
       turnOffLight();
     }
   });

这里需要添加一个判断条件来确定当前是开灯还是关灯的状态。