还不知道JavaScript-DOM怎么弄？这篇文章不容错过

文档对象模型DOM，是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。今天大家就跟随我的脚步，来详细了解一下关于DOM的那些事。

DOM的增加

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

创建节点

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

document.createElement()：创建指定的HTML元素
document.createTextNode()：创建文本节点
document.createDocumentFrame()：创建文档片段
document.createAttribute()：创建节点属性
node.cloneNode()：克隆节点

插入节点###

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

node.appendChild()：末尾追加一个新节点
node.insertBefore()：插入一个新节点

<div id="div1"><p id="p1">这是一个段落</p><p id="p2">这是另一个段落</p></div>

para.appendChild(node);

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

element.appendChild(para);</script>

例子解释：

这段代码创建新的 <p>元素：

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

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

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

然后您必须向 <p>元素追加这个文本节点：

para.appendChild(node);

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

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

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

element.appendChild(para);

关于document.createAttribute()

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

<p id="p1">这是一个段落</p>

<p id="p2">这是另一个段落</p>

</div>

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 ，则该节点的所有后代节点也都会被克隆，否则，只克隆该节点本身。

<p id="p1">这是一个段落</p>

<p id="p2">这是另一个段落</p>

</div>

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 方法将报错。

<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div>

parent.removeChild(child);</script>

例子解释：

这个 HTML 文档含有拥有两个子节点（两个<p>元素）的 <div> 元素：

<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div>

找到 id="div1"的元素：

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

找到id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

DOM的修改

修改节点常用的API方法主要有：

appendChild()：末尾追加一个新节点
insertBefore()：插入一个新节点
replaceChild()：替换节点

注意事项：以上几个方法都是操作的某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点。另外并不是所有节点都有子节点，如果在不支持子节点的节点上，调用了这些方法，将会导致错误。

DOM的查找

DOM节点中的查主要包括：查找元素和节点查找。

查找元素

getElementById() --- 通过ID访问；
getElementsByClassName() --- 通过类名访问；
getElementsByTagName() --- 通过标签名称访问；
querySelector() --- 通过CSS选择器访问（单个）；
querySelectorAll() --- 通过CSS选择器访问（所有）；

关于这一节的内容，可以访问上一篇文章：JavaScript-DOM访问方式

节点查找

所有的节点都有这些属性，都是可以用于访问相关的node节点：

Node.childNodes: 访问一个单元素下所有的直接子节点元素，可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点（比如text节点或其他元素节点）。
Node.firstChild: 与childNodes数组的第一个项(Element.childNodes[0])是同样的效果，仅仅是快捷方式。
Node.lastChild: 与childNodes数组的最后一个项(Element.childNodes[Element.childNodes.length-1])是同样的效果，仅仅是快捷方式。
Node.parentNode: 访问当前节点的父节点，父节点只能有一个，祖节点可以用Node.parentNode.parentNode 的形式来访问。
Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。
Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。

总结

DOM的操作在JavaScript中的重要性不言而喻，而基于DOM的操作，会关系到所有的交互操作。这些内容当然只是dom操作中的一部分，后面还有很多内容需要大家继续探索学习。