本小结的学习重点是：
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>