3.1、DOM初相识
3.1.1、DOM简介
文档对象模型（Document Object Model ，简称DOM），它就是一些系列编程接口，有了这些接口，就可以改变页面内容，结构和样式
DOM树：
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有的标签都是元素，DOM中使用element表示
节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看作是对象
3.1.2、事件前言
事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口.....
事件非常多，为了方便演示，先学简单的事件，后面再详细学习
方式一、
标签中对应的属性(事件属性)中设置一些js代码，这样当事件被触发时，这些代码将会被执行
这种方式：结构与行为耦合，不方便维护，不推荐使用
<button id="btn" onclick="alert('哈喽');">我是一个按钮</button> //onclick点击事件，点击的时候触发方式二、
可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用
<body>
<button id="btn">我是一个按钮</button>
<script>
//第一步：获取按钮对象
var btn=document.getElementById("btn");
//第二步：绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onclick=function(){
alert("你好")
}
</script>
</body>3.1.3、文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行,如果将script标签写到页面的上边， 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载 ，会导致无法获取到DOM对象。
第一种加载情况：
将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
<button id="btn">点我一下</button>
<script type="text/javascript">
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function () {
alert("hello");
};
</script>第二种加载写法：
onload事件会在整个页面加载完成之后才触发， 为window绑定一个onload事件 ，该事件对应的响应函数将会在页面加载完成之后执行， 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
window.onload = function () {
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function () {
alert("hello");
};
};3.2、DOM获取
DOM在我们实际开发中主要用来操作元素。一般有以下方法获取DOM
3.2.1、getElementById()
通过id属性获取一个元素节点对象，参数：id是大小写敏感的字符串，返回的是一个元素对象
补充1：innerHTML 可读写，一方面可获取到元素内部的html代码，另一方面可以操作更改元素内容，包括标签，保留空格和换行，比较常用
补充2：innerText 可读写，它和innerHTMl类似，不同的是更改元素内容的时候，它会自动将html标签，空格和换行去除
补充3：console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
var btn01 = document.getElementById("btn01"); //查找#btn01节点
btn01.onclick = function () {
var bj = document.getElementById("bj") //查找#bj节点
alert(bj.innerHTML);
//console.dir(bj, "bj");
};3.2.2、getElementsByTagName()
3.2.2.1、根据标签名来获取一组元素节点对象
返回一个类数组(伪数组)对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到伪数组中返回;如果页面中没有这个元素，则会返回一个空的伪数组；
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
var lis = document.getElementsByTagName("li");
//打印lis
//alert(lis.length);
//遍历lis
for (var i = 0; i < lis.length; i++) {
console.log(lis[i].innerHTML);
}
};3.2.2.2、获取某个元素（父元素）内部所有指定标签名的元素
element.getElementsByTagName('标签名')注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己
//获取id为city的元素
var city = document.getElementById("city");
/* 1:city.getElementsByTagName(); 获取元素下的一组节点 */
var lis = city.getElementsByTagName("li");3.2.3、getElementsByName()
通过name属性获取一组元素节点对象
补充2： innerHTML用于获取元素内部的HTML内容的，对于自结束标签，这个属性没有意义
补充3：如果需要读取元素节点属性，语法： 元素.属性名，
例如：元素.id ；元素.name ；元素.src ;元素.href等
表单属性：type、value、checked、selected、disabled等
注意：class属性不能采用这种方式，读取class属性时需要使用 元素.className
value值：就是输入文本框中的内容，要修改value值 element.value = "～～";
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
var inputs = document.getElementsByName("gender");
//alert(inputs.length);
for (var i = 0; i < inputs.length; i++) {
//alert(inputs[i].innerHTML);
// alert(inputs[i].value);
alert(inputs[i].className);
}
};3.2.4、getElementsByClassName()
通过class属性获取一组元素节点对象 （不支持IE8及以下浏览器）
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
var classs = document.getElementsByClassName("inner");
for (var i = 0; i < classs.length; i++) {
alert(classs[i].className);
}
};3.2.5、childNodes、children
返回父元素下的所有子节点
（1）、childNodes属性会获取包括文本节点在内的所有节点，DOM标准，标签间的空白也会被当成文本节点
（2）、children属性可以获取当前元素的所有子元素，不包括空白文档了
3.2.6、firstChild、firstElementChild
返回父元素下的第一个子节点
（1）、firstChild 第一个子节点(包括空白的文本节点)
（2）、firstElementChild 获取当前元素的第一个子元素
3.2.7、返回某元素的父节点
语法：某元素.parentNode
3.2.8、返回某元素的前/后一个兄弟节点
（1）、 previousSibling [ˈpriːviəs] ['sibliŋ] 返回前一个兄弟节点 也有可能获取到空白的文本
（2）、 previousElementSibling 返回前一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器
（3）、 nextSibling返回下一个兄弟节点 也有可能获取到空白的文本
（4）、 nextElementSibling 返回下一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器
var div = document.querySelector(".box1 div")
var div = document.querySelector(".box1")
var div=document.querySelectorAll(".box1")
3.2.9、获取body标签
//方法一
var body=document.getElementsByTagName("body")[0];
//方法二
var body = document.body3.2.10、获取html根标签
var html = document.documentElement;3.2.11、获取页面中所有的元素
//第一种方式
var all=document.all;
//第二种方式
var all = document.getElementsByTagName("*")3.2.12、document.querySelector()
-需要一个选择器的字符串作为参数，可以根据一个css选择器来查询 一个元素节点对象
-该方法总会返回唯一的元素，如果满足条件的元素是多个，那么它只会返回第一个
-IE8以上的都适用
3.2.13、document.querySelectorAll()
-该方法和qureySelector()用法类似，不同的是它将会将符合条件的所有元素封装到一个伪数组中返回
-即使符合条件的元素只有一个，它也会返回数组
var div = document.querySelector(".box1 div")
var div = document.querySelector(".box1")
var div=document.querySelectorAll(".box1")