本文向大家描述一下DOM文檔對象模型，DOM文檔對象模型實(shí)際上有兩種，HTMLDOM和XMLDOM。HTMLDOM是一種特殊的DOM，它僅支持使用getElementById()和getElementsByTagName()兩個方法來進(jìn)行查詢（請不要將IE私有的all()方法混淆進(jìn)來），而XMLDOM則可以與XPathAPI相結(jié)合，基于強(qiáng)大的正則表達(dá)式來進(jìn)行查詢。

DOM文檔對象模型

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

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

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

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

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

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

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

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

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

◆創(chuàng)建div，

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

◆將div附加到document上。

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

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

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

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

【編輯推薦】

1. JavaScript DOM特性與應(yīng)用詳解
2. W3C DOM模型用法詳解
3. 深入學(xué)習(xí)DOM模型基礎(chǔ)
4. 深入了解JavaScript HTML DOM對象
5. 術(shù)語匯編 Javascript DOM技術(shù)探究