有關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("***"); 一般頁面id會不同，若有多個相同id，則取到第乙個有該id的元素。

2.通過tagname : document.getelementsbytagname("***"); 返回標籤名為"***"的元素集合!

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

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 (元素的子節點) :

要重點提一下的就是這裡了，有如下**:

var ml = document.getelementbyid("mylist");
//很明顯ml物件有三個元素節點，我們也知道用childnodes屬性去找到節點數，然而陷阱隨之而來
console.log(ml.childnodes); // 7
//?!怎麼會有7個?
//原因在於childnodes中不僅包含了元素節點，還有4個文字節點。因此需要過濾
for(var i=0,len=ml.childnodes.length;i3.文字節點
文字節點包含的是可以照字面解釋的純文字內容，純文字中可以包含轉義後的html字元，但不能包含html**。文字節點的基本特徵如下:
123var 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");

這樣在body末尾會出現這樣的標籤

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

有關DOM的小總結

有關於虛擬DOM

DOM的核心總結

有關棧的小知識

有關DOM的小總結

有關於虛擬DOM

DOM的核心總結

有關棧的小知識

相關推薦