DOM详解

DOM 全称是 Document Object Model(文档对象模型)，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容

DOM将网页表示为一颗树，该树的节点类型有多种。

            元素节点——html标签

            文本节点——文本

            属性节点——属性总是被包含在标签里，所以属性节点总是被包含在元素节点当中。（元素节点（属性节点，文本节点））

通常可以通过开发者工具（如firebug）查看dom结构，但是要说明一点，开发者工具中的DOM并不完整，因为有些元素存在于DOM中，但是不会被开发者工具显示。比如回车会被当做一个文本节点。

1、元素节点操作

// 获取节点
document.getElementById()：根据id获取节点
document.getElementsByClassName()：根据class获取节点
document.getElementsByName()：根据name属性获取节点
document.getElementsByTagName()：根据元素标签获取节点
document.querySelector()：返回文档中匹配指定 CSS 选择器的一个元素
document.querySelectorAll()：返回文档中匹配指定 CSS 选择器的所有元素
document.firstChild：获取元素的首个子节点
document.lastChild：获取元素的最后一个子节点
document.childNodes：获取元素的子节点列表(childNodes 属性返回所有的节点，包括文本节点、注释节点)
document.children：获取元素的子节点列表(children 属性只返回元素节点)
document.previousSibling：获取当前节点的前一个节点
document.nextSibling：获取当前节点的后一个节点
document.parentElement：获取元素的父节点
document.parentNode：获取元素的父节点

// 创建节点
document.createElement()：创建元素节点
document.createAttribute()：创建属性节点
document.createTextNode()：创建文本节点

// 插入节点
document.appendChild()：向节点的子节点列表末尾添加一个新的子节点
document.insertBefore()：向节点的子节点列表最前面加一个新的子节点

// 替换节点
document.replaceChild()：将某个子节点替换成另一个

// 复制节点
document.cloneNode()：复制某个节点

// 删除节点
document.removeChild()：删除指定节点

2、属性节点操作 

getAttribute()：获取元素节点中指定属性的属性值
setAttribute()：创建或改变元素节点的属性
removeChild()：删除元素中指定的属性

3、文本节点操作

insertData(offset,String)：从offset指定的位置插入string
appendData(String)：将文本插入到文本节点的末尾处
deleteData(offset,count)：从offset起删除count个字符
replaceData(offset,count,data)：从offset将count个字符用data替换
splitText(offset)：按照指定的 offset 把文本节点分割为两个节点
substringData(start,length)：返回一个字符串，包含 Text 或 Comment 节点中从 start 开始的 length 个字符

除了上面，下面还有一些属性让我们更加方便的操作dom元素.

nodeType

DOM本质就是一堆节点的集合，由于包含不同类型的信息，所以就有不同类型的节点。接下来看nodeType。
元素节点，nodeType为1
属性节点，nodeType为2
文本节点，nodeType为3
文档节点，nodeType为9

nodeName

对于元素节点，nodeName就是标签名。元素节点也可以通过tagName获取标签名。
对于文本节点，nodeName永远是#text
对于属性节点，nodeName是属性名称
对于文档节点，nodeName永远是#document

nodeValue

对于元素节点，因为本身不直接包含文本，所以nodeValue是不可用的。
对于文本节点，值为文本值
对于属性节点，nodeValue值为属性值

innerHTML

innerHTML只对元素节点有用，获取元素节点内容，也就是元素节点包含的文本节点的值。其他节点使用nodeValue。

value

尽管innerHTML只对元素节点有用，但不是所有的元素节点都能使用innerHTML，比如像<input> 这样的替换元素。