什么是DOM？
DOM 中的三个字母，D（文档）可以理解为整个 Web 加载的网页文档；O（对象）可以理解为类似 window 对象之类的东西，可以调用属性和方法，这里我们说的是 document对象；M（模型）可以理解为网页文档的树型结构。
DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为W3C 标准。
DOM节点
节点：加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成
节点种类：元素节点、文本节点、属性节点
DOM节点获取
getElementById() 获取特定 ID 元素的节点
注意问题：window.onload
元素节点 属性：tagName innerHTML
HTML属性的属性：id title style className
getElementsByTagName() 获取相同元素的节点列表
document.getElementsByTagName('*'); //获取所有元素
document.getElementsByTagName(‘*’).length
getElementsByName() 获取相同名称的节点列表
document.getElementsByName('add') //获取 input 元素
document.getElementsByName('add')[0].value //获取 input 元素的 value 值
document.getElementsByName('add')[0].checked//获取 input 元素的 checked 值
getAttribute(名称) 获取特定元素节点属性的值
setAttribute(名称，值) 设置特定元素节点属性的值
removeAttribute(名称) 移除特定元素节点属性
子节点：只取第一层
childNodes 例：oUl.childNodes
兼容性问题: FF空的文本节点也算作一个节点 IE：空的不算
解决方法：
nodeType：节点类型 例：body.childNodes[0].nodeType
返回值：1为元素节点 3为文本节点
Children 例：oUl.children
IE\FF\谷歌都兼容
父节点：只有一个
parentNode 结构上的父级元素 例：oLi.parentNode
offsetParent 定位上的父级元素 例：oLi.offsetParent
首尾节点（有兼容性问题）
firstChild\firstElementChild 第一个子节点
例：oFirst=oUl.firstElementChild || oUl.firstChild
lastChild\lastElementChild 最后一个子节点
例：oLast=oUl.lastElementChild || oUl.lastChild
兄弟节点（有兼容性问题）
nextSibling\nextElementSibling 下一个节点
例：oNext=oUl. nextElementSibling || oUl.nextSibling
previousSibling\previousElementSibling 上一个节点
例：oPrevious=oUl. previousElementSibling || oUl. previousSibling
createElement() 创建一个元素节点
document.createElement('p'); //创建一个元素节点
createTextNode() 创建一个文本节点
var text = document.createTextNode('段落'); //创建一个文本节点
p.appendChild(text); //将文本节点添加到子节点末尾
appendChild() 将新节点追加到子节点列表的末尾
appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。
var box = document.getElementById('box'); //获取某一个元素节点
var p = document.createElement('p'); //创建一个新元素节点<p>
box.appendChild(p); //把新元素节点<p>添加子节点末尾
insertBefore() 将新节点插入在前面
box.parentNode.insertBefore(p, box); //在box(div)之前创建一个节点
replaceChild() 将新节点替换旧节点
var p=document.createElement('p');
box.parentNode.replaceChild(p,box); //把<div>换成了<p>
cloneNode() 复制节点
var box = document.getElementById('box');
var clone = box.firstChild.cloneNode(true); //获取第一个子节点， true 表示复制内容
box.appendChild(clone); //添加到子节点列表末尾
removeChild() 移除节点
box.parentNode.removeChild(box); //删除指定节点
文档碎片可以提高DOM操作性能(理论上)
文档碎片原理
document.createDocumentFragment()
