这是我参与更文挑战的第30天，活动详情查看: 更文挑战
1， 什么是DOM
DOM 全称Document Object Model文档对象模型，JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面
- 文档表示的就是整个HTML网页文档
- 对象表示将网页中的每一个部分都转换为了一个对象
- 模型用来表示对象之间的关系，方便我们获取
2， 什么是节点
节点Node, 是构成网页的最基本的组成部分，网页中的每一个部分都是一个节点。比如：html标签，属性，文本，注释，整个文档等都是第一个节点，虽然都是节点，但是他们实际上具体类型是不同的。
比如：标签：我们称为元素节点
属性：我们称为属性节点
文本：我们称为文本节点
文档：我们称为文档节点
节点的类型不同，属性和方法也都不仅相同
节点的属性：
3， document
浏览器已经为我们提供文档节点对象，这个对象就是window属性。我们可以在页面直接使用，文档节点代表的是整个网页
// 获取button对象
var btn = document.getElementById("btn")
// 修改按钮文字
btn.innerHTML = "zlm"
console.log(btn)
（1） 事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，JavaScript和HTML之间的交互是通过事件实现的。
// 获取button对象
var btn = document.getElementById("btn")
// 绑定一个单击事件
btn.ondblclick = function() {
alert('aa')
}
4， 文档加载
浏览器在加载一个页面时是按照自上向下的顺序执行的，读取一行就运行一行，如果将JavaScript标签写在页面的上边，在代码执行时，页面还没有加载，就会报错，将JS代码编写到页面的下部就是为了可以在页面加载完毕以后在执行JS代码。
方案一：
JS代码写在下面
方案二：
window.onload = function() {
alert('hello')
}
5， DOM查询
下面都是通过document调用
(1) 通过id属性获取一个元素节点对象
document.getElementById()
(2) 通过标签名获取一组元素节点对象
document.getElementsByTagName()
(3) 通过name属性获取一组元素节点对象
doucment.getElementsByName()
(4) innerHTML
innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意思。如果需要读取元素节点属性，直接使用 元素.属性名
例子： 元素.id 元素.name 元素.value
注意： class属性不能采取这种方式，读取class属性时需要使用元素.className
inputs[i].className
(5) 图片切换
window.onload = function() {
var prev = document.getElementById('prev')
var next = document.getElementById('next')
var img = document.getElementsByTagName('img')[0];
var imgArr = ["img/1.jpg", “img/2.jpg], "img/3.jpg"]
var index = 0
prev.onclick = function() {
index--;
if (index < 0) {
index = 4
}
img.src = imgArr[index]
}
next.onclick = function() {
index++;
if (index > imgArr.length -1) {
index = 0
}
img.src = imgArr[index]
}
}
6， 获取元素节点的子节点
下面都是通过元素节点调用
（1） 返回当前节点的指定标签名后代节点
getElementsByTagName()
(2) 表示当前节点的所有子节点
childNodes属性会包括文本节点所在的所有子节点，而且DOM标签之间的空白也会当成文本节点
childNodes
（3） children属性可以获取当前元素的所有子元素
chiildren
(4) 表示当前节点的第一个子节点
firstChild
firstElementChild : 表示获取当前元素的第一个子元素
(5) 表示当前节点的最后UI一个子节点
lastChild
7， 获取父节点和兄弟节点
通过具体的节点调用
（1） 表示当前节点的父节点
parentNode
(2) 表示当前节点的前一个兄弟节点
previousSibling
(3) 表示当前节点的后一个兄弟节点
nextSibling
注意：元素：
元素：bj.innerHTML == 文本节点： bj.firstChild.nodeValue
