DOM 文档对象模型，操作【获取/新增插入/删除/修改/复制/替换】文档中的节点
节点：【node】
元素节点，文本节点，属性节点，注释节点..
element.nodeType 1.
获取元素节点：
1.document.getElementById();
document.getElementsByTagName();
document.getElementsByName();

document.getElementsByClassName();
document.querySelector(selector); 从IE8开始支持
document.querySelectorAll();
document.documentElement html元素
document.body body元素
document.head head元素

2、实时/非实时
实时DOM接口
document.getElemenstByTagName();
document.getElementsByName();//一般用来获取表单元素
document.getElementsByClassName();//IE9开始支持

3、获取元素节点的速度
ID>非实时>实时

4、创建元素节点
document.createElement('ul')

5、需要找到插入元素节点的父级
parentNode.appendChild(node); 添加到末尾
parendNode.insertBefore(node, targetchildNode) 插入到某一个位置

6、元素中的获取属性/添加属性/移除属性
获取属性：ele.getAttribute(name)
设置属性：ele,setAttribute(name,value)
移除属性：ele.removeAttribue(name)

7、重绘重排 replain reflow
js优化，DOM操作消耗性能，尽可能减少DOM操作，减少重绘重排

8、复制节点
node.cloneNode(false/true);
默认false 浅复制，不复制内部元素
true 深复制，复制内部元素

9、替换节点
node可以是新创建元素，也可以是存在在页面上的元素
parentNode.replaceChild(node,replacedNode)

10、移除节点
parentNode.removeChild(node)

11、节点之间的关系
父子/兄弟
parentNode.children 获取元素所有的子元素
parentNode.childNodes 获取元素所有的子节点
parentNode.nextSibling 下一个兄弟节点
parentNode.nextElementSibling 获取到的是下个兄弟元素
parentNode.previousSibling 上一个兄弟节点
parentNode..previousElementSibling 上一个兄弟元素