一、Dom获取
1、全称：Document Object Model 文档对象模型
2、我们常用的节点类型
元素（标签）节点、文本节点、属性节点（也就是标签里的属性）、
3、document有个属性叫nodeType返回的是数字
1：代表元素节点
2：代表属性节点
3：代表文本节点
4、节点的获取
元素节点的获取方法
Document.getElementById()
Document.getElementsByClassName()
Document.getElementsByTagName()
Document.querySelector()
Document.querySelectorAll()
属性节点的获取方法
元素 . getAttribute（"属性名"） 获取属性值的方法
元素 . attribuites 获取元素身上所有属性构成的集合（数组）
元素 . attribute [ 索引 ] . value 获取元素里面的值
元素 . setAttribute（"属性名","属性值"） 给元素设置属性和属性值
元素 . remove（"属性"） 删除元素
文本节点没有获取的方法，没有意义
5、获取元素的子节点
元素 . childNodes 这个属性有兼容性，标准浏览器回获取文本节点，而低版本的浏览器不会，所以建议children属性
获取单个子节点：具有兼容问题
获取第一个子节点：
标准下：元素 . firstElementchild
非标准下：元素 . firstchild
获取最后一个子节点：
标准下：元素 .lastElementchild
非标准下：元素 . lastchild
获取上一个兄弟节点：
标准下：元素 . previousElementsibling
非标准下：元素 . previoussibling
获取上一个兄弟节点：
标准下：元素 . nextElementchild
非标准下：元素 . nextchild
解决兼容性问题：
拿获取第一个子节点为列：
var list=document . getElementById（"list"）
var ss=list . firstElementchild || list . firstchild
6、获取父节点
元素 . parentNode 没有兼容性
二、Dom 动态创建节点
1、生成节点的方法：
document . createElement（"div"）
2、插入节点的方法：
父节点 . appendChild（"新节点"）
3、在指定的位置插入节点
父节点 . inserBefore（新节点，谁的前面） 将元素插入指定节点的前面
4、删除节点
父节点 . removechild（）
三、拓展
字符串中的拼接和Dom创建都是渲染的方试
字符串：
优点：简单，可以处理数据，层次感比较强
缺点：字符串拼接会影响到原来子元素的事件
Dom创建：
优点：是一个独立的个体，不会影响到原来的元素
缺点：处理数据量过大会比较麻烦，会造成Dom回流
Dom回流：
页面渲染时，我们对html结构简单的增删查改时，浏览器会对所有的dom重新排序，这就是Dom回流，严重影响浏览器的性能
提升页面性能优化：
1、多采用雪碧图
2、阻止超链接的默认行为
3、减少DOM回流
4、减少向服务器请求次数