一、DOM文档对象模型
二、获取元素方法
1、根据ID获取 2、根据标签名获取 3、通过H5新增方法获取 4、获取特殊元素（body，html）
1、根据ID获取
.getElementById（‘ID名’）
2、根据标签名获取
.getElementsByTagName（‘标签名’）
如果页面有多个相同标签，只想获取其中某一个，可以先给标签名加ID，然后先获取ID名，再获取ID名里面想要的元素
3、通过H5新增方法获取
（1）getElementsByClassName（'类名'）根据类名获得里面所有的元素对象
（2）querySelector（'选择器名字'） 类选择器前要加点，ID选择器前加#，表明这是个什么选择器，并且是返回第一个元素对象
（3）querySelectorAll（'选择器名字'） 类选择器前要加点，ID选择器前加#，返回的是选择器内所有的元素对象
4、获取特殊元素
获取body元素：document.body
获取html元素：documen.documentElement
三、事件基础
事件理解为触发响应机制，例如用户点击某按钮时产生一个事件，弹出对话框
事件由三部分组成，事件源、事件类型（如何触发）、事件处理程序（做什么）
步骤：获取事件源，注册事件类型，添加事件处理程序
四、操作元素
1、改变常用元素内容 （innerHTML更实用）
二者区别
代码
2、修改元素属性（文字，src，href等）
案例：点击不同按钮显示不同图片
案例：不同时间显示不同图片以及问候语
3、表单元素的属性操作（type，value值等）
密码显示、隐藏案例
4、样式属性操作（大小，颜色，位置等）
事件源.style 行内样式操作，适合修改样式比较少的（驼峰命名法）
事件源.className = '类名' 类名样式操作，适合修改样式多的（先在css里写好变化后的样式，然后在事件里面引入这个类名）
.style和.className语法规范
循环精灵图案例
排他思想案例
换肤效果案例
鼠标经过、离开事件案例
全选案例
4、自定义属性操作
3、移除自定义属性
自定义属性操作案例：tab栏切换（重点）
H5规定自定义属性由data-开头，容易判断这个是自定义的
五、节点操作
节点用有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值），元素节点类型为1，属性为2，文本为3，开发主要操作元素节点
5.3 节点层级
1.父节点 parentNode
2、获取所有的子节点
方法一.ohildNodes （比较麻烦，会把空格文本节点也获取过来，不推荐）
children 获取所有子节点第二种方法 推荐
获取第一个子节点
方法一：.firstChild （包含所有节点，因此第一个经常获取到的是空格）
方法二：.firstElementChild（获取的是第一个元素节点，i9以上支持）
方法三： .children[0]（获取元素节点里的第一个 ！！推荐！!）
获取最后一个子节点
方法一：.lastChild （包含所有节点，因此第一个经常获取到的是空格）
方法二：.lastElementChild（获取的是最后一个元素节点，i9以上支持）
方法三：.children[XX.children.length - 1]
（获取元素节点里的最后一个 ！！推荐！!）
子节点案例：下拉菜单
3、兄弟节点
获取当前元素的下一个节点
方法一：.nextSibling（获取下一个节点，包含所有类型节点）
方法二：.nextElementSibling（获取的是元素节点，i9以上支持）
获取当前元素的上一个节点
方法一：.previousSibling（获取上一个节点，包含所有类型节点）
方法二：.previousElementSibling（获取的是元素节点，i9以上支持）
4、创建和添加节点
创建节点 document.createElement('标签名')
添加节点
方法一：父亲.appendChild(儿子) —是追加在后面的
方法二：父亲.insertBefore(儿子，添加到指定元素的前面）
创建添加节点案例：留言板
5、删除节点
node.removeChild（child） 删除一个子节点
删除节点案例：删除留言
动态生成表格案例
克隆节点
node.cloneNode（）
如果括号内为空或者为false，则是浅拷贝，只复制标签，不复制子节点；
如果括号内为ture，则是深拷贝，复制标签并且复制里面的子节点；
三种动态创建元素区别
6、DOM重点核心（总结）
创建、增、删、改、查、属性操作、事件操作
6.1 创建
1、document.write 2、innerHTML 3、document.createElement（'标签名'）
6.2 增
1、父亲.appendChild（儿子）追加在后面 2、insertBefore （儿子，放在指定元素前）
6.3 删
1、node.removeChild（child）
