DOM，即文档对象模型，是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格，DOM的重要性不言而喻，今天我们就来学习一下JavaScript中DOM的操作方法。

创新互联公司是专业的钦南网站建设公司，钦南接单;提供成都网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行钦南网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

DOM的增加

DOM操作中增指的是增加节点，分为两部分：创建节点和插入节点。

创建节点

创建节点中常用的API方法主要有：

1. document.createElement()：创建指定的HTML元素

2. document.createTextNode()：创建文本节点

3. document.createDocumentFrame()：创建文档片段

4. document.createAttribute()：创建节点属性

5. node.cloneNode()：克隆节点

插入节点###

插入节点常用的API方法主要有：

1. node.appendChild()：末尾追加一个新节点

2. node.insertBefore()：插入一个新节点

例子解释：

这段代码创建新的

元素：

var para=document.createElement("p");

如需向

元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是新段落。");

然后您必须向

元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

关于document.createAttribute()

document.createAttribute() 方法创建并返回一个新的属性节点。但是这个方法不是很常用，如果涉及到创建属性，一般使用node.setAttribute() 。

var node = document.getElementById('div1');var newAttr = document.createAttribute('title');  //创建一个新的title属性；

newAttr .nodeValue ='Hello world!';  //title属性的值是：Hello world!

node.setAttributeNode(attr);//运用到对应的元素节点上

关于node.cloneNode()

node.cloneNode(deep) 方法返回该节点的一个副本，deep 可选，表明是否采用深度克隆，如果为true ，则该节点的所有后代节点也都会被克隆，否则，只克隆该节点本身。

var node = document.getElementById('div1');var cloneNode = node.cloneNode(true);//克隆div1整个节点；

cloneNode.id ="div2";//修改克隆的节点id名称为div2；

document.body.appendChild(cloneNode);//在网页中追加克隆的节点；

DOM的删除

DOM节点的删除主要API是node.removeChild();可以使用parentNode.removeChild(child)删除指定父节点parentNode的一个子节点child，并返回被删除的节点。

注意事项：这个方法是要在被删除的节点的父节点上调用的，而不是在被删除节点上调用的，如果参数节点不是当前节点的子节点，removeChild 方法将报错。

例子解释：

这个 HTML 文档含有拥有两个子节点（两个

元素）的