1、DOM：Document Object Model
2、DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合。也有人称DOM是对html以及XML标准编程的接口
3、查看元素节点、
（1）document代表整个文档
（2）document.getElementById( 'only' ) 标签
（3）document.getElementsByTagName( 'div' ) 类数组 实时更新的
（4）document.getElementsByClassName( 'demo' ) 类数组 实时更新的 ie8和ie8以下版本中没有此方法，可以多个class一起
（5）document.querySelector( ) 标签 不是实时的
（6）document.querySelectorAll( ) 类数组 不是实时的
4、遍历节点树
（1）parentNode：父节点（最顶端的parentNode为#document）
（2）childNodes : 子节点们
（3）firstChild ： 第一个子节点
（4）lastChild ：最后一个子节点
（5）nextSibling ： 相邻的后一个兄弟节点
（6）previousSibling ： 相邻的前一个兄弟节点
5、基于元素节点树的遍历
（1）parentElement：返回点前元素的父元素节点（IE不兼容）
（2）children：只返回当前元素的元素子节点
（3）node.childElementCount === node.children.length : 返回当前元素节点的子元素节点个数
（4）firstElementChild ： 返回的是第一个元素节点（IE不兼容）
（5）lastElementChild : 返回的是最后一个元素节点（IE不兼容）
（6）nextElementSibling：返回上一个兄弟元素节点
（7）previousElementSibling：返回下一个兄弟元素节点
6、节点的四个属性
（1）nodeName：元素的标签名，以大写形式表示，只读
（2）nodeValue：表示Text节点或Comment节点的文本内容，可读写
（3）nodeType：表示该节点的类型，只读
（4）attributes：表示该元素节点的属性集合
节点的一个方法：Node.hasChildNodes( ) 返回true或false
7、节点的类型
（1）元素节点：1
（2）属性节点：2
（3）文本节点：3
（4）注释节点：8
（5）document：9
（6）DocumentFragment：11
8、创建节点
（1）创建元素节点
document.createElement('div')
（2）创建文本节点
document.createTextNode('商品标题')
（3）创建注释节点
document.createComment('this is comment')
9、插入节点
（1）appendChild
向标签末端插入节点
var div = document.getElementByTagName('div')[0];
var text = document.createTextNode('hello world');
var span = document.createElement('span');
div.appendChild(text)
div.appendChild(span)
结果：
<div>
hello world
<span></span>
</div>
（2）insertBefore
div.insertBefore(a, b)
向div标签中的b标签前插入a节点
10、删除节点
（1）removeChild( )
div.removeChild( i ) // 删除div元素中的i节点，并返回i节点
（2）remove( )
div.remove( ) // 删除div元素，没有返回值
11、替换节点
replaceChild
div.replaceChild(new, origin) // 用new元素替换div元素中的origin元素，并返回origin元素
12、节点的属性
（1）innerHTML
div.innerHTML = 123
（2）innerText(火狐不兼容)、textContent(老版本IE不兼容)
div.innerText 等同于 div.textContent
（3）className
div.className // 获取class名
div.className = 'demo' // 设置class名
13、节点的方法
（1）setAttribute
设置元素节点的属性
div.setAttribute('class', 'demo')
（2）getAttribute
获取元素节点的属性
div.getAttribute('class')