文档对象模型DOM

了解DOM

浏览器通过文档对象模型DOM使javascript程序可以访问网页上的元素，而DOM是网页上XHTML中文档正文标题、段落、列表、ID、class以及其它出现数据的一个内部表示。

(1)节点类型

下面是文档节点树：

文档节点（document）：整个文档就是一个文档节点

文档类型节点：DTD引用（使用<！DOCTYPE>语法）的对象表现形式

文档片段节点：像document一样来保存其它节点

元素节点：每个HTML标签是一个元素节点

文本节点：包含在HTML元素中的文本

属性节点：每个HTML属性是一个属性节点

注释节点：就是注释

(2)节点的属性和方法

nodeName:节点的名字（文本节点的nodeName总是#text） 

nodeValue:节点的值（元素节点的nodeValue为null）

firstChild：第一个儿子节点

lastChild：最后一个儿子节点

childNodes：所有子节点的列表

previousSibling：前一个兄弟节点

nextSibling：后一个兄弟节点

appendChild()：添加儿子节点到末尾

removeChild()：删除儿子节点

replaceChild()：替换儿子节点

insertBefore()：插入儿子节点

在这里先了解DOM，下面就是对DOM的一些操作

处理元素属性

为大家介绍三个方法：

getAttribute(name) 等于 attributes.getNameItem(name).value

setAttribute(name,newvalue) 等于 attributes.getNameItem(name).value = newvalue

removeAttribute(name) 等于 attributes.removeNameItem(name)

一般我们都是用前面三个，在有浏览器兼容问题下，才选择后面三个复杂的方法

还有个我们也常用的方法：[object].className，不过只能访问class属性

访问指定节点

相信大家肯定对它们很熟悉吧，哈哈

（1）getElementById()

（2）getElementsByTagName()

（3）getElementsByName()

创建和操作节点

（1） creatAttribute(name)：创建属性节点

        createElement(tagname)：创建元素节点

        createTextNode(text)：创建文本节点

下面会有一个例子让大家理解：

（2）removeChild() 、 replaceChild()、 insertBefore()

这三个方法已经在前面介绍过了，就不多啰嗦了，直接给例子

需要注意的是只能从父亲节点来删除儿子节点

odivtemp是新的，nodetemp是要被替换的

（3）cloneNode()

从字面上就不难看出这是一个克隆节点的方法，这个方法很简单就不多说，注意它有个参数ture表示深度克隆，例如[object].cloneNode（true），false表示浅度克隆，需要注意的是：所克隆下来的只能使用一次

操作文本节点

先介绍几个常用的方法吧

appendData(string)：在末尾添加文本节点

deleteData(offset，count)：从指定位置开始指定数量删除文本的字符

insertData(offset，string)：在指定的字符串中插入文本节点

replaceData(offset，count，string)：在给定的字符替换指定位置的文本节点

这其实很容易看懂就不一一举例了

有时我们对文本操作有点复杂，要创建很多的儿子节点和元素节点，我们可以用innerHTML，因为它是神，但它也不完全是神，不能处理table和select，哈哈

上述完全是本人原创的，也是本人对DOM基础的总结，如果那里有不对的地方，望大家指出来，在这里先谢谢了

转载于:https://my.oschina.net/14211/blog/186381