javascript DOM的範例程式碼詳解

這篇文章主要介紹了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;

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

2p 她(

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

　　　　2.透過tagName : document.getElementsByTagName("xxx"); 傳回標籤名稱為"xxx"的元素集合!

　　　　3.透過name : document.get

　　　　3.透過name : document.#getElement#ByName();

#　　理解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元素) :

　<p id="myp" class="bd" title="Body text" lang="en" dir="ltr"></p>
　　　　var p = document.getElementById("p");
　　　　1. console.log(p.id); // "myp"
　　　　2. console.log(p.className); // "bd"
　　　　3. console.log(p.title); // "Body text"
　　　　4. console.log(p.lang); // "en"
　　　　5. console.log(p.dir); // "ltr"

 　tip two (取得,設定與移除特性):

　1.p.getAttribute("id"); // "myp"
　　　　2.p.setAttribuye("id","yourp"); // id已变动
　　　　3.p.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程式碼。文本節點的基本特徵如下:

<p id="myp">123</p> 
 
var myp = document.getElementById("myp") //取到元素节点 
var tx = myp.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末尾會出現e388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a3這樣的標籤###

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

以上是javascript DOM的範例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！