一、簡介
DOM即（Document Object Model）：文檔對象模型，用來將標記型文檔封裝成對象，並將標記型文檔中的所有內容（標簽、文本、屬性等）都封裝成對象。即標記型文檔的一種解析方式。因為封裝為對象就可以對其中的屬性和行為進行調用，以便於對這些文檔及文檔中的內容進行更方便的操作。
DOM解析方式：將標記型文檔解析為一顆dom樹，而樹中的內容都封裝為節點對象。
按照標簽的層次關系體現出標簽的所屬，形成一個樹狀結構。所以我們將DOM解析文檔形成的document對象稱為dom樹，而樹中的標簽以及文本甚至屬性稱為節點。這個節點也稱為對象。標簽通常也稱為頁面中的元素。
注意：這個DOM解析的好處是可以對樹中的節點進行任意操作，如增刪查改。但也有弊端：這種解析需要將標記型文檔加載進內存。意味着如果文檔體積很大時較為浪費空間。
二、另一種解析方式：SAX
是由一些組織定義的一種民間常用的解析方式，並不是w3c標准，而DOM是w3c的標准。
SAX的解析方式：基於事件驅動的解析。好處：獲取數據的速度快。弊端：不遵從增刪查改操作。
三、DOM三種模型
DOM level 1：將html文檔封裝成對象。
DOM level 2：在level1的基礎上加入了新功能，比如解析名稱空間。
DOM level 3：將xml文檔封裝成了對象。
四、DHTML:動態html
不是一門語言，而是多項技術綜合體的簡稱，這些技術包括HTML、CSS、DOM、JavaScript。
四種技術(語言)在動態html中扮演的角色：
HTML:用標簽封裝數據。即負責提供標簽，對數據進行封裝，目的是便於對該標簽中的數據進行操作。
CSS：對數據樣式進行定義。即負責提供樣式屬性，對標簽中的數據進行樣式的定義。
DOM：將文檔和標簽等所有內容進行解析。即負責將標記型文檔及文檔中的內容進行解析。並封裝成對象，在對象中定義了更多的屬性和行為，便於對對象進行操作。
JS:對頁面行為進行定義（頁面動態效果）。即負責提供程序設計語言，對頁面中的對象進行邏輯操作。
所以JavaScript是DHTML的主力編程語言。
五、BOM：Browser Object Model（瀏覽器對象模型）
這個模型方便於操作瀏覽器。瀏覽器對應的對象就是Window對象。
六、獲取節點對象
DOM將標記型文檔封裝為了document對象，而文檔中的內容封裝成了節點對象。常見的節點對象有：標簽、屬性、文本。
獲取節點對象的方法：
方式一：通過id獲取：getElementByID();
1 <script type="text/javascript"> 2 function changeDiv(){ 3 //通過id獲取div標簽 4 var divNode = document.getElementById("divId"); 5 //操作該節點,如獲取該節點的nodeName、nodeType、nodeValue 6 7 //獲取並修改文本數據 8 divNode.innerHTML = "???????".fontcolor("red"); 9 } 10 </script> 11 <input type="button" value="點擊查看效果" onclick="changeDiv()"/> 12 <div id="divId">這是一個div節點</div>
方式二：通過name屬性獲取節點(因為name可以相同，所以返回的是一個數組)getElementsByName();
1 <script type="text/javascript"> 2 function show(){ 3 //通過name獲取節點數組 4 var nodes = document.getElementsByName("haha"); 5 // 6 var divNode = nodes[0]; 7 var textNode = nodes[1]; 8 9 document.write(divNode.innerHTML+"<br/>"+textNode.value); 10 } 11 </script> 12 <input type="button" value="點擊查看效果" onclick="show()"/> 13 <div name="haha">這是一個div節點</div> 14 <input type="text" value="請輸入任意內容..." name ="haha"/>
方式三：對所以標簽都適用的方法：像<a>這樣的標簽既沒有id，也沒有name，就可以直接通過標簽名來獲取：getElementsByTagName();
1 <script type="text/javascript"> 2 function show(){ 3 //通過標簽名獲取節點數組 4 var nodes = document.getElementsByTagName("a"); 5 // 6 var node1 = nodes[0]; 7 var node2 = nodes[1]; 8 9 document.write(node1.href+"<br/>"+node2.href); 10 } 11 </script> 12 <input type="button" value="獲取以下鏈接地址" onclick="show()"/> 13 <a href="http://www.w3school.com.cn">W3C官網</a> 14 <a href="http://www.cnblogs.com/fzz9/">博客園主頁</a>
七、通過節點層次關系獲取節點
節點的層次關系：
1、父節點：parentNode(一個父節點)
2、子節點：childNodes(若干個子節點)
3、兄弟節點：上一個兄弟節點：previousSibling；下一個兄弟節點：nextSibling
八、節點的一般操作
1、創建並添加
2、刪除節點
3、替換&克隆節點
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>節點的一般操作</title> 6 <style type="text/css"> 7 div{ 8 border:#FFFFFF 1px solid; 9 width:200px; 10 padding:20px; 11 margin:10px; 12 font-family:"華文中宋"; 13 font-size:20px; 14 } 15 #divTitle{ 16 border-left-width:80px; 17 width:50px; 18 padding:10px; 19 margin:10px; 20 background:#00dd66; 21 } 22 #div1{ 23 background:#0066FF; 24 } 25 #div2{ 26 background:#6600FF; 27 } 28 #div3{ 29 background:#66FF00; 30 } 31 #div4{ 32 background:#FF0066; 33 } 34 hr{ 35 border:#CCFF00 1px solid; 36 } 37 </style> 38 </head> 39 40 <body> 41 <script type="text/javascript"> 42 //在div3中添加一個文本節點 43 function creNode(){ 44 //創建文本節點 45 var newText = document.createTextNode("蠟炬成灰淚始干"); 46 //獲取div3節點 47 var div3 = document.getElementById("div3"); 48 //添加 49 div3.appendChild(newText); 50 } 51 //刪除節點 52 function delNode(){ 53 var divNode3 = document.getElementById("div3"); 54 //方法一：刪除節點,參數為true時，連同子節點也一起上刪除，此方法在IE中有效 55 //divNode3.removeNode(true); 56 //方法二：使用父節點刪除(推薦) 57 divNode3.parentNode.removeChild(divNode3); 58 } 59 60 //克隆節點 61 function updateNode(){ 62 var div1 = document.getElementById("div1"); 63 var div3 = document.getElementById("div3"); 64 var copyDiv = div3.cloneNode(true); 65 div1.parentNode.replaceChild(copyDiv,div1); 66 } 67 68 //添加標題連接 69 function setTitle(){ 70 //創建鏈接元素 71 var title = document.createElement("a"); 72 title.href = "http://hanyu.baidu.com/shici/detail?pid=1d4e20feb969440989a03d6e0700f077&from=kg0"; 73 title.innerHTML = "無題"; 74 title.target = "_blank"; 75 //獲取divTitle節點 76 var divTitle = document.getElementById("divTitle"); 77 //添加 78 divTitle.appendChild(title); 79 } 80 </script> 81 82 <input type="button" value="創建並添加節點" onclick="creNode()" /> 83 <input type="button" value="刪除節點" onclick="delNode()" /> 84 <input type="button" value="克隆節點" onclick="updateNode()" /> 85 <input type="button" value="查看" onclick="setTitle()" /> 86 <hr/> 87 <div id="divTitle"></div> 88 <div id="div1">相見時難別亦難</div> 89 <div id="div2">東風無力百花殘</div> 90 <div id="div3"></div> 91 <div id="div4">蠟炬成灰淚始干</div> 92 </body> 93 </html>