javascript DOM的詳解及實例代碼

javascript DOM 總結

一直以為DOM（文檔對象模型）是JS中最簡單的一部分。不可否認，它確實很簡單，因為DOM的思維模式有點固定，只需要簡單地記住一些固定的方法，所以DOM可以說是所有js(這里指的是客戶端的js)入門的起手點。

　　最近我在做一些有用到DOM的練習時，發現自己的DOM知識非常零散(一直以為掌握的很好)，可能有很多朋友都覺得，DOM嘛，也就調用調用幾個方法，或者我直接使用jQuery，根本不用考慮DOM的細節。是，這也沒錯，jQuery對DOM的封裝可謂前無古人，但是正如成長一樣，跑之前是一定要會走的，所以我認為對DOM必須要有比較詳細的了解，于是我總結了如下的關于DOM的一些使用方法。

　　在W3C總結跪DOM規范中，有一些十分常用的，也有些不怎么有用的，這里我們主要討論常用一些DOM操作(有關DOM的基本概念在此就不介紹了)：

　　節點層次

　　所謂節點層次，指的是html文檔中存在具有各自特點，數據，方法的節點(例如標簽)，節點之間的關系構成了層次(其實可以想象成樹狀結構)。W3C的DOM1級規范中定義了一個NODE接口。這個接口有一些方法是非常有用的:

　　Node.ELEMENT_NODE;(元素節點)

　　Node.TEXT_NODE;(文本節點)

　　Node.DOCUMENT_NODE(文檔節點)

　　而每個節點都有自己的節點類型標志，也就是NodeType屬性，例如元素節點的nodeType == '1';文本節點的nodeType == '3';文檔節點的nodeType == '9';

　　1.文檔節點

　   文檔節點在一個文檔中用document對象表示，它的基本特征如下:

console.log(document.nodeType); // 9 
console.log(document.nodeName); // #document 
console.log(document.nodeValue); // null 
console.log(document.parentNode); // null(它已經是最頂層的節點，樹的根節點) 

 　　tip one (文檔的子節點):

　　　　1.document.documentElement可以取到html對象，同樣可以通過document.childNodes[0]以及document.firstchild取到。然而　documentElement可以更快，更直接訪問元素。

　　tip two (文檔的相關信息):

　　　　1.取得文檔標題 : document.title;

　　　　2.取得完整的url : document.URL;

　　　　3.取得域名(ip) : document.domain;

　　　　4.取得頁面的URL : document.referrer;

　　tip three (文檔查找元素):

　　　　1.通過id : document.getElementById("xxx");  一般頁面id會不同，若有多個相同id，則取到第一個有該id的元素。

　　　　2.通過tagName : document.getElementsByTagName("xxx"); 返回標簽名為"xxx"的元素集合!

　　　　3.通過name : document.getElementByName();

　　理解document對象非常簡單，兼容性做的也比較靠前。

　　2.元素節點

　　元素節點提供了對元素標簽名，子節點及特性的訪問。它的基本特征如下:

var ele = document.getElementById("element"); //通過document取到一個標簽對象 
console.log(ele.nodeType); // 1 
console.log(ele.nodeName); // 返回元素的標簽名 
console.log(ele.nodeValue); //永遠返回null! 

　　tip one (html元素) :

　　　　<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

　　　　var div = document.getElementById("div");

　　　　1. console.log(div.id); // "myDiv"

　　　　2. console.log(div.className); // "bd"

　　　　3. console.log(div.title); // "Body text"

　　　　4. console.log(div.lang); // "en"

　　　　5. console.log(div.dir); // "ltr"

 　tip two (取得,設置和刪除特性):

　　　　1.div.getAttribute("id"); // "myDiv"

　　　　2.div.setAttribuye("id","yourDiv"); // id已變動

　　　　3.div.removeAttribute("id"); //id已刪除

　　　　需要注意:  在IE7及以下的版本中，三種方法存在著一些異常行為，通過set設置class 和style特性，特別是事件處理程序時，沒有任何效果，get也是同樣的。因此一般開發要避免以上三種方法，推薦通過屬性來設置特性。

 　tip three (元素的子節點) :

　　　　要重點提一下的就是這里了，有如下代碼:

<ul id="myList"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul> 
 
var mL = document.getElementById("myList"); 
//很明顯mL對象有三個元素節點，我們也知道用childNodes屬性去找到節點數，然而陷阱隨之而來 
 
console.log(mL.childNodes); // 7 
//?!怎么會有7個? 
 
//原因在于childNodes中不僅包含了元素節點，還有4個文本節點。因此需要過濾 
 
for(var i=0,len=ml.childNodes.length;i<len;i++){ 
   if(ml.childNodes[i].nodeType == "1"){ // 利用元素節點的特性 
     // .... 
   }   
}<br>//最好的方法可以這么做<br>//如果元素對象內部標簽名是一樣的<br>var items = ml.getElementsByTagName("li"); //能得到三個li節點對象 
　　

　3.文本節點

　　文本節點包含的是可以照字面解釋的純文本內容，純文本中可以包含轉義后的HTML字符，但不能包含HTML代碼。文本節點的基本特征如下:

<div id="myDiv">123</div> 
 
var myDiv = document.getElementById("myDiv") //取到元素節點 
var tx = myDiv.childNodes[0] //前面也提過childNodes的特性，這次取到了文本節點 
 
console.log(tx.nodeType) // 3 
console.log(tx.nodeName) // 所有文本節點的nodeName都是"#text"; 
console.log(tx.nodeValue) // 123(節點包含的文本)，注意元素節點是不能取到它包含的文本節點的文本的 
 
//所以其父節點顯然是個元素節點. 

　Tip one :

　　　　創建文本節點的兩個方法:document.createTextNode(),document.createText();

　　　　創建好后不會直接嵌入文檔中，需要引用。

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

　　　　var b = document.createTextNode("123");

　　　　a.appendChild(b);

　　　　document.body.appendChild(a);

　　　　這樣在body末尾會出現<p>123</p>這樣的標簽

　　個人認為DOM肯定是學習js的入門點，但是也需要很長時間的打磨。我看了DOM不少于三遍，僅僅是DOM1級規范，每次都有些新東西。如果你學習DOM，那么就一定要注意一些陷阱，同時也要多花時間琢磨。　

 感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！