一直以為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
在react中,render執行的結果得到的並不是真正的dom節點,結果僅僅是輕量級的j ascript。虛擬dom只對頁面上真正變化的部分進行操作,所以我們不需要擔心效能問題,可以瘋狂地重新整理頁面。virtual dom加了一些特別的步驟來避免了整棵dom樹變更過 dom很慢,元素也非常強大。操...
DOM的核心總結
文件物件模型 document object model,簡稱dom 是w3c組織推薦的處理可擴充套件標記語言 html或者xml 的標準程式設計介面。w3c已經定義了一系列的dom介面,通過這些dom介面可以改變網頁的內容 結構和樣式。關於dom操作,我們主要針對於元素的操作。主要有建立 增 刪 ...
有關棧的小知識
include int main 引用於 c專家程式設計 在我的ubuntu14.04 64位作業系統中輸出 the stack top is near 0x7ffc5643981c 符合64位虛擬記憶體管理 2.linux棧的大小 首先用ulimit s可以檢視棧大小 輸出 8192。單位是k。也...