如何使用DOM文檔對象模型

這篇文章將為大家詳細講解有關如何使用DOM文檔對象模型，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

DOM文檔對象模型

DOM就是文檔對象模型（DocumentObjectModel），最初是W3C為了解決瀏覽器大戰時代不同瀏覽器之間的差別而制定的，主要就是IE和NetscapeNavigator之間的差別。

DOM文檔對象模型實際上有兩種，HTMLDOM和XMLDOM。HTMLDOM是一種特殊的DOM，它僅支持使用getElementById()和getElementsByTagName()兩個方法來進行查詢（請不要將IE私有的all()方法混淆進來），而XMLDOM則可以與XPathAPI相結合，基于強大的正則表達式來進行查詢。Ajax開發中所用到的主要是HTMLDOM，如果不涉及到處理XML格式的數據，就不需要用到XMLDOM。以下所說的DOM文檔對象模型也是指HTMLDOM。

用簡單通俗的語言來說，DOM文檔對象模型使得你可以訪問頁面上的標準組件（元素、樣式表、腳本、etc.）并處理它。多年來，那些希望創建前端Web應用的程序員們都必須使用JavaApplet、Flash或者ActiveX。當然現在這些工具還是可以使用的，但是支持DOM的瀏覽器使得Web開發人員擁有了創建多樣化、功能強大的基于Web的應用程序的能力，而且完全使用基于標準的技術。

DOM文檔對象模型將整個HTML文檔展現為內存中的一棵樹狀結構（瀏覽器內存中僅僅只有一棵這樣的HTMLDOM樹，其根節點為document對象），每個元素、屬性都是樹上的一個節點。可以通過JavaScript來訪問這棵DOM樹，遍歷樹上的節點、動態添加、刪除樹上的節點、設置或修改某個節點的樣式、設置或修改某個節點中保存的數值等等。通過JavaScript對于這棵DOM樹所做的任何修改都會立即生效，JavaScript不能夠控制瀏覽器重新呈現DOM樹的時間。因為瀏覽器重新呈現DOM樹是一個非常耗時的操作，所以應該將做這種操作的次數盡量減到最少。

假設我動態創建了一個div作為容器，在div中包含了5個動態加載的img元素，如果我采取這樣的順序來編寫代碼：

◆創建div，將其附加到document上。

◆創建5個img，每次一創建，就立即將其附加到div上（從而附加在document上）。

那么瀏覽器重新呈現DOM樹做了幾次呢？一共做了6次。

如果我采取這樣的順序來編寫代碼呢：

◆創建div，

◆創建5個img，將其附加在div上。

◆將div附加到document上。

那么瀏覽器重新呈現DOM樹做了幾次呢？只做了1次。

顯然，后面一種方法重新呈現的次數最少，因此執行的效率***，這就是在AjaxinAction中所推薦的方法。

另外，DOM樹上的每個節點都是一個非常龐大的對象。為了直觀地了解DOM文檔對象模型節點是如何龐大，可以使用Firefox中的DOM檢查器任意打開一個DOM節點，其中屬性的數量會讓你大吃一驚，尤其是style數組中的屬性數量。因此當動態創建的DOM節點不再使用時，一定要及時釋放掉（就是將到它的引用全部設置為null，使其處于不可達的狀態，以便垃圾回收器能夠及時將其回收）。如果沒有及時釋放不用的DOM節點，一段時間之后可能會造成驚人的內存泄漏。

***再說一下，innerHTML這個屬性并不是W3CDOM的標準屬性。這個屬性最初是IE的發明，但是開發者使用起來非常方便，于是成為了事實上的標準。其他所有主流的瀏覽器也都支持這個屬性，所以可以放心使用。而outerHTML、innerText則只有IE支持，在開發跨瀏覽器的Ajax應用時，不應該使用這兩個屬性。

關于如何使用DOM文檔對象模型就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。