本小结的学习重点是：
1、复习window.onload = function () {}的使用场景
当我们的js代码是写在header中的时候， 就需要使用window.onload了， 避免浏览器不知道页面中的标签是什么导致报错。
根本原因就是浏览器在加载页面的时候， 是按照从上到下的顺序依次加载的， 我们在js中编写的时候有可能会提前使用一些标签。
如果不是写在window.onload的函数里面的话， 就会引起浏览器不清楚你在js中使用的还没有加载到的标签是啥而保存的情况出现。
2、使用getElementsByTagName（）方法的场景
这个方法时候是根据标签的名称来选择标签的；
如果在html页面中有多个相同的标签，那么使用该方法会将所有的标签都选取出来，返回值是一个数组；
我们可以使用遍历的方式来对数组中的每一个标签进行处理。
下面是本节代码，仅供参考：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选, 不选和反选</title> <script> window.onload = function () { var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oBtn3 = document.getElementById('btn3'); var oDiv = document.getElementById('div1'); /* 这里就可以看到, 我们可以通过oDiv来选中标签中的所有input标签 并且不会选中按钮, 这就是为什么要将所有的选择框放在div标签中的原因. */ var oCheckBox = oDiv.getElementsByTagName('input'); // 给oBtn1按钮添加一个点击事件, 这样写的好处就是不需要再给这个函数取名字了. oBtn1.onclick = function () { for (let i = 0; i < oCheckBox.length; i++) { oCheckBox[i].checked = true; // 全选 } } oBtn2.onclick = function () { for (let i = 0; i < oCheckBox.length; i++) { oCheckBox[i].checked = false; // 全选 } } oBtn3.onclick = function () { for (let i = 0; i < oCheckBox.length; i++) { /* oCheckBox[i].checked = true; // 全选 if(oCheckBox[i].checked == true){ oCheckBox[i].checked = false; }else{ oCheckBox[i].checked = true; } */ // 使用三目表达式来替换分支条件语句 oCheckBox[i].checked = oCheckBox[i].checked == true ? false : true; } } } </script> </head> <body> <input id="btn1" type="button" value="全选"> <input id="btn2" type="button" value="不选"> <input id="btn3" type="button" value="反选"> <!-- 注意: 这里的把所有的选择框都放在一个div标签中, 是为了方便全部选中 --> <div id="div1"> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> <input type="checkbox"></br> </div> </body> </html>