一、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個數值常量來表示，任何節點類型必居其一。

　　（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（一）