javascript DOM的詳解及實(shí)例代碼

javascript DOM 總結(jié)

一直以為DOM（文檔對(duì)象模型）是JS中最簡(jiǎn)單的一部分。不可否認(rèn)，它確實(shí)很簡(jiǎn)單，因?yàn)镈OM的思維模式有點(diǎn)固定，只需要簡(jiǎn)單地記住一些固定的方法，所以DOM可以說(shuō)是所有js(這里指的是客戶端的js)入門的起手點(diǎn)。

　　最近我在做一些有用到DOM的練習(xí)時(shí)，發(fā)現(xiàn)自己的DOM知識(shí)非常零散(一直以為掌握的很好)，可能有很多朋友都覺(jué)得，DOM嘛，也就調(diào)用調(diào)用幾個(gè)方法，或者我直接使用jQuery，根本不用考慮DOM的細(xì)節(jié)。是，這也沒(méi)錯(cuò)，jQuery對(duì)DOM的封裝可謂前無(wú)古人，但是正如成長(zhǎng)一樣，跑之前是一定要會(huì)走的，所以我認(rèn)為對(duì)DOM必須要有比較詳細(xì)的了解，于是我總結(jié)了如下的關(guān)于DOM的一些使用方法。

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

　　節(jié)點(diǎn)層次

　　所謂節(jié)點(diǎn)層次，指的是html文檔中存在具有各自特點(diǎn)，數(shù)據(jù)，方法的節(jié)點(diǎn)(例如標(biāo)簽)，節(jié)點(diǎn)之間的關(guān)系構(gòu)成了層次(其實(shí)可以想象成樹狀結(jié)構(gòu))。W3C的DOM1級(jí)規(guī)范中定義了一個(gè)NODE接口。這個(gè)接口有一些方法是非常有用的:

　　Node.ELEMENT_NODE;(元素節(jié)點(diǎn))

　　Node.TEXT_NODE;(文本節(jié)點(diǎn))

　　Node.DOCUMENT_NODE(文檔節(jié)點(diǎn))

　　而每個(gè)節(jié)點(diǎn)都有自己的節(jié)點(diǎn)類型標(biāo)志，也就是NodeType屬性，例如元素節(jié)點(diǎn)的nodeType == '1';文本節(jié)點(diǎn)的nodeType == '3';文檔節(jié)點(diǎn)的nodeType == '9';

　　1.文檔節(jié)點(diǎn)

　   文檔節(jié)點(diǎn)在一個(gè)文檔中用document對(duì)象表示，它的基本特征如下:

console.log(document.nodeType); // 9 
console.log(document.nodeName); // #document 
console.log(document.nodeValue); // null 
console.log(document.parentNode); // null(它已經(jīng)是最頂層的節(jié)點(diǎn)，樹的根節(jié)點(diǎn)) 

 　　tip one (文檔的子節(jié)點(diǎn)):

　　　　1.document.documentElement可以取到html對(duì)象，同樣可以通過(guò)document.childNodes[0]以及document.firstchild取到。然而　documentElement可以更快，更直接訪問(wèn)元素。

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

　　　　1.取得文檔標(biāo)題 : document.title;

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

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

　　　　4.取得頁(yè)面的URL : document.referrer;

　　tip three (文檔查找元素):

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

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

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

　　理解document對(duì)象非常簡(jiǎn)單，兼容性做的也比較靠前。

　　2.元素節(jié)點(diǎn)

　　元素節(jié)點(diǎn)提供了對(duì)元素標(biāo)簽名，子節(jié)點(diǎn)及特性的訪問(wèn)。它的基本特征如下:

var ele = document.getElementById("element"); //通過(guò)document取到一個(gè)標(biāo)簽對(duì)象 
console.log(ele.nodeType); // 1 
console.log(ele.nodeName); // 返回元素的標(biāo)簽名 
console.log(ele.nodeValue); //永遠(yuǎn)返回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 (取得,設(shè)置和刪除特性):

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

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

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

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

 　tip three (元素的子節(jié)點(diǎn)) :

　　　　要重點(diǎn)提一下的就是這里了，有如下代碼:

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

　3.文本節(jié)點(diǎn)

　　文本節(jié)點(diǎn)包含的是可以照字面解釋的純文本內(nèi)容，純文本中可以包含轉(zhuǎn)義后的HTML字符，但不能包含HTML代碼。文本節(jié)點(diǎn)的基本特征如下:

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

　Tip one :

　　　　創(chuàng)建文本節(jié)點(diǎn)的兩個(gè)方法:document.createTextNode(),document.createText();

　　　　創(chuàng)建好后不會(huì)直接嵌入文檔中，需要引用。

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

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

　　　　a.appendChild(b);

　　　　document.body.appendChild(a);

　　　　這樣在body末尾會(huì)出現(xiàn)<p>123</p>這樣的標(biāo)簽

　　個(gè)人認(rèn)為DOM肯定是學(xué)習(xí)js的入門點(diǎn)，但是也需要很長(zhǎng)時(shí)間的打磨。我看了DOM不少于三遍，僅僅是DOM1級(jí)規(guī)范，每次都有些新東西。如果你學(xué)習(xí)DOM，那么就一定要注意一些陷阱，同時(shí)也要多花時(shí)間琢磨。　

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