文檔對象模型DOM，是一種基於樹的API文檔，它要求在處理過程中整個文檔都表示在存儲器中。另外一種簡單的API是基於事件的SAX，它可以用於處理很大的XML文檔，由於大，所以不適合全部放在存儲器中處理。今天大家就跟隨我的腳步，來詳細瞭解一下關於DOM的那些事。
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()：插入一個新節點
<div id="div1"><p id="p1">這是一個段落</p><p id="p2">這是另一個段落</p></div>
<script>var para=document.createElement("p");var node=document.createTextNode("這是新段落。");
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() 。
<div id="div1">
<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 ，則該節點的所有後代節點也都會被克隆，否則，只克隆該節點本身。
<div id="div1">
<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>
<script>var parent=document.getElementById("div1");var child=document.getElementById("p1");
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方法主要有：
1. appendChild()：末尾追加一個新節點
2. insertBefore()：插入一個新節點
3. replaceChild()：替換節點
注意事項：以上幾個方法都是操作的某個節點的子節點，也就是說，要使用這幾個方法必須先取得父節點。另外並不是所有節點都有子節點，如果在不支持子節點的節點上，調用了這些方法，將會導致錯誤。
DOM的查找
DOM節點中的查主要包括：查找元素和節點查找。
查找元素
1. getElementById() --- 通過ID訪問；
2. getElementsByClassName() --- 通過類名訪問；
3. getElementsByTagName() --- 通過標籤名稱訪問；
4. querySelector() --- 通過CSS選擇器訪問（單個）；
5. querySelectorAll() --- 通過CSS選擇器訪問 （所有）；
關於這一節的內容，可以訪問上一篇文章：JavaScript-DOM訪問方式
節點查找
所有的節點都有這些屬性，都是可以用於訪問相關的node節點：
1. Node.childNodes: 訪問一個單元素下所有的直接子節點元素，可以是一個可循環的類數組對象。該節點集合可以保護不同的類型的子節點（比如text節點或其他元素節點）。
2. Node.firstChild: 與childNodes數組的第一個項(Element.childNodes[0])是同樣的效果，僅僅是快捷方式。
3. Node.lastChild: 與childNodes數組的最後一個項(Element.childNodes[Element.childNodes.length-1])是同樣的效果，僅僅是快捷方式。
4. Node.parentNode: 訪問當前節點的父節點，父節點只能有一個，祖節點可以用Node.parentNode.parentNode 的形式來訪問。
5. Node.nextSibling: 訪問DOM樹上與當前節點同級別的下一個節點。
6. Node.previousSibling: 訪問DOM樹上與當前節點同級別的上一個節點。
總結
DOM的操作在JavaScript中的重要性不言而喻，而基於DOM的操作，會關係到所有的交互操作。這些內容當然只是dom操作中的一部分，後面還有很多內容需要大家繼續探索學習。