DOM 操作实战：点亮灯泡、修改内容、选中复选框

点亮灯泡可以通过改变灯泡的样式来实现。例如，可以给灯泡所在的元素添加一个类名，该类名设置了灯泡亮的样式。

// 点亮灯泡
document.getElementById('light').classList.add('on');

在所有的 div 标签的标签体内容后面加上': very good' 可以通过遍历所有的 div 元素，然后修改它们的 innerHTML 属性来实现。

// 获取所有的 div 标签
var divs = document.getElementsByTagName('div');
// 遍历 div 标签，并在标签体内容后面加上: very good
for (var i = 0; i < divs.length; i++) {
  divs[i].innerHTML += ': very good';
}

使所有的复选框星现被选中的状态可以通过修改复选框的 checked 属性来实现。

// 获取所有的复选框
var checkboxes = document.getElementsByTagName('input');
// 遍历复选框，并设置它们为选中状态
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].type === 'checkbox') {
    checkboxes[i].checked = true;
  }
}

实验结论：

通过 DOM 操作可以改变元素的样式、内容和属性。
DOM 操作可以对页面中的元素进行增、删、改、查等操作。
DOM 操作可以实现对页面中元素的动态控制和交互。