DOM

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')