JS之DOM(一)
一、DOM簡介
什麽是DOM?簡單地說,DOM是是針對HTML和XML文檔的一個API,一套對文檔的內容進行抽象和概念化的方法。
學習過ORM的同學可能知道ORM是將數據庫中的表映射到類,建立一個表和類的映射模型,類屬性為表字段,類實例為表記錄,通過操作類和類的實例來對數據庫進行增刪改查。
DOM就是另一種模型,不同的是DOM是將一個HTML或XML文檔映射到一個家譜樹,文檔中的內容劃分為許多類型的節點,這些節點按照原本的層次組成一顆家譜樹,通過對家譜樹節點的操作來達到對整個文檔的增刪改查。
也就是說,DOM描繪了一個層次化的節點樹,可以使用JS來操作這個節點樹,進而改變底層文檔的外觀和結構。
另外DOM也分為幾種不同的等級,這主要是根據每一級推出的時間及主要功能來分的。最開始的DOM(DOM0)在每個瀏覽器的實現都有很大的區別,大大增加了開發的難度,為此,W3C結合各家優點,推出了一個標準化的DOM(DOM1),主要定義了HTML和XML文檔的底層結構。之後推出的DOM2和DOM3則在這個結構的基礎上引入了更多的交互能力,其目的在於擴展DOM API,以滿足操作XML的需求,同時提供更好的錯誤處理及特性檢測,這些功能的關鍵是對命名空間的支持,我們在之後會詳細講解。
二、DOM節點樹
說到DOM,就必須明白DOM將文檔構建節點樹的規則,HTML大家都熟悉,那就先來看下DOM節點樹的組成。
DOM節點樹由節點構成,而節點也是對象,有以下幾種類型:
1. 最基本的節點是Node,用於抽象的表示文檔中一個獨立的部分;所有其他類型都繼承自Node。
2. Document類型表示整個文檔,是一組分層節點的根節點。在JS中,document對象使Document的一個實例。
3. Element節點表示文檔中的所有HTML或XML元素,可以用來操作這些元素的內容和特性。
4. 另外還有一些節點類型,分別表示屬性、文本內容、註釋、文檔類型、CDATA區域和文檔片段。
其中我們最應該關心的的是Element節點,這種節點與HTML中的標簽一一對應,此外,文本節點與屬性節點對我們操控文檔也有著很大幫助。
剛剛提到節點也是對象,這就說明了幾個問題:
1.每種節點都有其各自的屬性和方法。
2.節點之間除了家族關系(層次關系)外,還可能有繼承關系(這主要說的是抽象節點Node與其他類型的關系),所以會有繼承下來的共有屬性與方法。
(一)Node類型
Node節點作為所有節點類型的超類,定義了各類節點共享著的的相同屬性和方法:
1.每個節點都有的屬性:
(1)NodeType屬性:表明節點類型。節點類型由在Node類型中定義的下列12個數值常量來表示,任何節點類型必居其一。
類型 | nodeType常數值 | 描述 |
---|---|---|
Node.ELEMENT_NODE | 1 | 元素節點 |
Node.ATTRIBUTE_NODE | 2 | 屬性節點 |
Node.TEXT_NODE | 3 | 文本節點 |
Node.CDATA_SECTION_NODE | 4 | 字符數據節點(文本不會被解析器解析) |
Node.ENTITY_REFERENCE_NODE | 5 | 實體引用節點 |
Node.ENTITY_NODE | 6 | 實體節點 |
Node.PROCESSING_INSTRUCTION_NODE | 7 | 處理指令節點 |
Node.COMMENT_NODE | 8 | 註釋節點 |
Node.DOCUMENT_NODE | 9 | 文檔節點(DOM樹的根節點) |
Node.DOCUMENT_TYPE_NODE | 10 | 向為文檔定義的實體提供接口 |
Node.DOCUMENT_FRAGMENT_NODE | 11 | 表示鄰接節點和它們的子樹。 |
Node.NOTATION_NODE | 12 | 代表一個符號在DTD中的聲明 |
(2)childNodes屬性:指向一個NodeList對象(包含一組同胞節點)。NodeList是一種類數組對象,用於保存一組有序的節點,可以通過位置來訪問這些節點。NodeList的獨特之處在於,他實際上是基於DOM結構動態執行查詢的結果,這種特性的好處是DOM結構的變化能夠自動反映在NodeList對象中,但也會產生一些問題,之後我們會講到,主要是內存占用方面。另外還有一種HTMLCollection對象,和NodeList很類似,主要區別在於NodeList保存所有類型的節點,HTMLCollection只保存Element類型的節點,以及多一個namedItem方法(傳入name屬性返回節點)。
(3)parentNode、previousSibling、nextSibling屬性:分別指向父節點、前一個同胞節點、後一個同胞節點。
2.每個節點都有的方法:
(1)appendChild():用於向childNodes列表的末尾添加一個節點,返回新增的節點。
(2)insertBefore():定位插入子節點,返回新增的節點。
(3)replaceChild():替換節點,返回被替換的節點。技術上將,這個是將舊節點的所有關系指針復制到新節點上,同時刪除自身關系,這樣舊節點就成了一個孤兒節點,在文檔中沒有了自己的位置。
(4)removeChild():移除節點。也是通過刪除關系指針的方式。
(二)Document類型
未完待續……
JS之DOM(一)