DOM（document object model）文档对象模型
js通过dom来对html文档进行操作，只要理解了dom就可以随心所欲的
操作web页面
节点Node——构成html文档的基本单元
常用节点的四类： 文档节点:整个html文档
元素节点：html文档中的标签
属性节点:元素的属性
文本节点:html标签中的文本
浏览器已经为我们提供了文档节点对象，这个对象就是windows属性
可以在页面中直接使用，文档节点代表整个网页
事件：就是用户和浏览器的交互行为，比如鼠标点击，鼠标移动，关闭窗口
两种绑定方式：
一，直接在标签里面通过属性来绑定
eg <button id="btn" onmousemove="alert(‘123‘)">我是一个按钮<button>
这种写法我们成为结构和行为耦合，不方便维护，不推荐使用
二，获取对象，通过对象去绑定
浏览器加载页面是=时，时自上向下的顺序加载的
读取到一行就运行一行，如果将script标签卸载页面上边，在代码执行时页面还没有加载
onload事件会在整个页面加载完成时触发，
为windows绑定一个onload事件，该事件对应的响应函数会在页面加载完成后执行
这样就可以确保代码执行时我们所有的dom加载完毕
（为了性能最优，js代码写在最下面，因为写在上面先加载了又不执行）
三个方法
1.getElementById() 通过id属性获取元素节点
2.getElementsByTagName() 通过标签名获取一组元素节点对象，这个方法会给我们返回一个类数组对象，所有元素都会封装到对象中
3.getElementsByName（） 通过name获取一组元素节点对象
innerHTML 通过这个属性可以获取到元素内部的html代码
读取元素节点的属性直接使用 元素节点.属性名
但是class属性不能使用这种方式，读取class属性要使用className
获取元素节点的子节点
1.getElementsByTagName()-方法 返回当前节点指定标签名后代节点
2.childNodes-属性 表示当前节点所有子节点
3.firstChild-属性 表示当前节点的第一个子节点
4.lastChild -属性 表示当前节点的最后一个子节点
获取父节点和兄弟节点
1.parentNode-属性 调式当前节点的父节点
2.previousSibling-属性 表示当前节点的前一个兄弟节点
3.nextSsbling-属性 表示当前节点的后一个兄弟节点
