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

創(chuàng)新互聯公司是一家專注于成都做網站、網站制作與策劃設計,崗巴網站建設哪家好?創(chuàng)新互聯公司做網站,專注于網站建設10年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:崗巴等地區(qū)。崗巴做網站價格咨詢:13518219792

DOM文檔對象模型

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

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

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

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

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

◆創(chuàng)建div，將其附加到document上。

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

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

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

◆創(chuàng)建div，

◆創(chuàng)建5個img，將其附加在div上。

◆將div附加到document上。

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

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

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

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

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