JavaScript DOM 操作实战：添加内容和选中复选框

本示例演示如何使用 JavaScript 的 DOM 操作，完成以下两个效果：

为所有 div 标签的标签体内容后面加上 ': very good 3'。
使所有复选框呈现被选中状态。

可以使用 JavaScript 中的 DOM 操作来实现这个效果。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>DOM操作示例</title>
</head>
<body>
  <h1>电量灯泡</h1>

  <div>灯泡1</div>
  <div>灯泡2</div>
  <div>灯泡3</div>
  <div>灯泡4</div>

  <h1>复选框实验报告</h1>

  <input type='checkbox' id='checkbox1'>
  <label for='checkbox1'>实验报告1</label><br>
  <input type='checkbox' id='checkbox2'>
  <label for='checkbox2'>实验报告2</label><br>
  <input type='checkbox' id='checkbox3'>
  <label for='checkbox3'>实验报告3</label><br>
  <input type='checkbox' id='checkbox4'>
  <label for='checkbox4'>实验报告4</label><br>

  <script>
    // 为所有的div标签添加内容
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
      divs[i].innerHTML += ': very good 3';
    }

    // 将所有复选框设为选中状态
    var checkboxes = document.querySelectorAll('input[type='checkbox']');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = true;
    }
  </script>
</body>
</html>

运行以上代码，你会看到所有的 div 标签的内容后面都添加了 ': very good 3'，并且所有的复选框都呈现选中状态。