js基础（DOM）
浏览器为我们提供了文档节点对象，它是window的属性，可以直接使用，文档对象代表整个网页
事件：就是用户和浏览器之间的交互行为，我们可以在时间对应的属性设置一些js代码，这样当事件被触发的时候，这些代码就会执行
<button id="btn" onmousemove="alert('事件被触发！！！');">我是一个按钮</button>
可以为按钮对应的事件绑定处理函数的形式来相应事件，这样当时间被触发的时候，其对应的函数就会被调用
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
//获取按钮对象
var btn = document.getElementById("btn");
//绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onclick = function(){
alert("事件被触发");
};
</script>
浏览器在加载一个页面的时候，是按照自上而下的顺序进行加载的（这就可能导致获取不到DOM对象）
onload()事件会在整个页面加载完成之后才会触发
/*
* 为window绑定一个onload事件
* 该事件对应的响应函数将会在页面加载完成之后执行，
* 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
*
*/
window.onload = function(){
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("hello");
};
};
innerHTML 通过这个属性可以获取到元素内部的html代码， innerHTML用于获取元素内部的HTML代码的， 对于自结束标签，这个属性没有意义
getElementById("");可以根据标签id属性来获取一个元素节点对象
getElementsByTagName(“”)可以根据标签名来获取一组元素节点对象
这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组中返回
getElementsByName("");可以根据标签的name属性来获取一组元素节点对象
如果需要读取元素节点属性，直接使用 元素.属性名 注意：class属性不能采用这种方式，读取class属性时需要使用 元素.className 如：inputs[i].className
//查找#city下所有li节点 var lis = city.getElementsByTagName("li");
childNodes属性会获取包括文本节点在呢的所有节点，根据DOM标签标签间空白也会当成文本节点，在IE8及以下的浏览器中，不会将空白文本当成子节点，
firstChild可以获取到当前元素的第一个子节点（包括空白文本节点） var fir = phone.firstChild;
firstElementChild获取当前元素的第一个子元素 firstElementChild不支持IE8及以下的浏览器，
innerText 该属性可以获取到元素内部的文本内容 它和innerHTML类似，不同的是它会自动将html去除
返回#bj的父节点 var pn = bj.parentNode;
前一个兄弟节点（也可能获取到空白的文本） var ps = and.previousSibling;
previousElementSibling获取前一个兄弟元素，IE8及以下不支持
设置#username的value属性值 var um = document.getElementById("username"); um.value = "今天天气真不错~~~";
返回#bj的文本值 var bj = document.getElementById("bj"); bj.firstChild.nodeValue
全选：
/*
* 全选按钮
* - 点击按钮以后，四个多选框全都被选中
*///为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
//遍历items
for(var i=0 ; i<items.length ; i++){
//通过多选框的checked属性可以来获取或设置多选框的选中状态
//alert(items[i].checked);
//设置四个多选框变成选中状态
items[i].checked = true;
}
//将全选/全不选设置为选中
checkedAllBox.checked = true;
};
全不选：
/*
* 全不选按钮
* - 点击按钮以后，四个多选框都变成没选中的状态
*/
//2.#checkedNoBtn
//为id为checkedNoBtn的按钮绑定一个单击响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i=0; i<items.length ; i++){
//将四个多选框设置为没选中的状态
items[i].checked = false;
}
//将全选/全不选设置为不选中
checkedAllBox.checked = false;
};
反选：
/*
* 反选按钮
* - 点击按钮以后，选中的变成没选中，没选中的变成选中
*/
//3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for(var i=0; i<items.length ; i++){
//判断多选框状态
/*if(items[i].checked){
//证明多选框已选中，则设置为没选中状态
items[i].checked = false;
}else{
//证明多选框没选中，则设置为选中状态
items[i].checked = true;
}*/
items[i].checked = !items[i].checked;
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[i].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
}
}
//在反选时也需要判断四个多选框是否全都选中
};
全选checkbox：
/*
* 全选/全不选 多选框
* - 当它选中时，其余的也选中，当它取消时其余的也取消
*
* 在事件的响应函数中，响应函数是给谁绑定的this就是谁
*/
//为checkedAllBox绑定单击响应函数
checkedAllBox.onclick = function(){
//alert(this === checkedAllBox);
//设置多选框的选中状态
for(var i=0; i <items.length ; i++){
items[i].checked = this.checked;
}
};
/*
* 如果四个多选框全都选中，则checkedAllBox也应该选中
* 如果四个多选框没都选中，则checkedAllBox也不应该选中
*/
//为四个多选框分别绑定点击响应函数
for(var i=0 ; i<items.length ; i++){
items[i].onclick = function(){
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for(var j=0 ; j<items.length ; j++){
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
}
}
};
}
获取body元素：
//获取body标签
var body = document.getElementsByTagName("body")[0];
console.log(body);
//在document中有一个属性body，它保存的是body的引用
var body = document.body;
console.log(body);
获取html元素
//document.documentElement保存的是html根标签
var html = document.documentElement;
console.log(html);
获取页面所有的元素
// document.all代表页面中所有的元素
var all = document.all;
console.log(all.length);
for(var i=0 ; i<all.length ; i++){
console.log(all[i]);
}
all = document.getElementsByTagName("*");
console.log(all.length);
根据类获取元素
/*
* 根据元素的class属性值查询一组元素节点对象
* getElementsByClassName()可以根据class属性值获取一组元素节点对象，
* 但是该方法不支持IE8及以下的浏览器
*/
var box1 = document.getElementsByClassName("box1");
console.log(box1.length);
//获取class为box1中的所有的div
//.box1 div
/*
* document.querySelector()
* - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
* - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1")
console.log(div.innerHTML);
console.log(box1.innerHTML);
/*
* document.querySelectorAll()
* - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
* - 即使符合条件的元素只有一个，它也会返回数组
*/
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
console.log(box1);
