建站
咨詢
售后
建站咨詢
新聞中心
本文向大家描述一下DOM文檔對(duì)象模型，DOM文檔對(duì)象模型實(shí)際上有兩種，HTMLDOM和XMLDOM。HTMLDOM是一種特殊的DOM，它僅支持使用getElementById()和getElementsByTagName()兩個(gè)方法來(lái)進(jìn)行查詢（請(qǐng)不要將IE私有的all()方法混淆進(jìn)來(lái)），而XMLDOM則可以與XPathAPI相結(jié)合，基于強(qiáng)大的正則表達(dá)式來(lái)進(jìn)行查詢。
DOM文檔對(duì)象模型
DOM就是文檔對(duì)象模型（DocumentObjectModel），最初是W3C為了解決瀏覽器大戰(zhàn)時(shí)代不同瀏覽器之間的差別而制定的，主要就是IE和NetscapeNavigator之間的差別。
DOM文檔對(duì)象模型實(shí)際上有兩種，HTMLDOM和XMLDOM。HTMLDOM是一種特殊的DOM，它僅支持使用getElementById()和getElementsByTagName()兩個(gè)方法來(lái)進(jìn)行查詢（請(qǐng)不要將IE私有的all()方法混淆進(jìn)來(lái)），而XMLDOM則可以與XPathAPI相結(jié)合，基于強(qiáng)大的正則表達(dá)式來(lái)進(jìn)行查詢。Ajax開發(fā)中所用到的主要是HTMLDOM，如果不涉及到處理XML格式的數(shù)據(jù)，就不需要用到XMLDOM。以下所說(shuō)的DOM文檔對(duì)象模型也是指HTMLDOM。
用簡(jiǎn)單通俗的語(yǔ)言來(lái)說(shuō)，DOM文檔對(duì)象模型使得你可以訪問(wèn)頁(yè)面上的標(biāo)準(zhǔn)組件（元素、樣式表、腳本、etc.）并處理它。多年來(lái)，那些希望創(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文檔對(duì)象模型將整個(gè)HTML文檔展現(xiàn)為內(nèi)存中的一棵樹狀結(jié)構(gòu)（瀏覽器內(nèi)存中僅僅只有一棵這樣的HTMLDOM樹，其根節(jié)點(diǎn)為document對(duì)象），每個(gè)元素、屬性都是樹上的一個(gè)節(jié)點(diǎn)?？梢酝ㄟ^(guò)JavaScript來(lái)訪問(wèn)這棵DOM樹，遍歷樹上的節(jié)點(diǎn)、動(dòng)態(tài)添加、刪除樹上的節(jié)點(diǎn)、設(shè)置或修改某個(gè)節(jié)點(diǎn)的樣式、設(shè)置或修改某個(gè)節(jié)點(diǎn)中保存的數(shù)值等等。通過(guò)JavaScript對(duì)于這棵DOM樹所做的任何修改都會(huì)立即生效，JavaScript不能夠控制瀏覽器重新呈現(xiàn)DOM樹的時(shí)間。因?yàn)闉g覽器重新呈現(xiàn)DOM樹是一個(gè)非常耗時(shí)的操作，所以應(yīng)該將做這種操作的次數(shù)盡量減到最少。
假設(shè)我動(dòng)態(tài)創(chuàng)建了一個(gè)div作為容器，在div中包含了5個(gè)動(dòng)態(tài)加載的img元素，如果我采取這樣的順序來(lái)編寫代碼：
◆創(chuàng)建div，將其附加到document上。
◆創(chuàng)建5個(gè)img，每次一創(chuàng)建，就立即將其附加到div上（從而附加在document上）。
那么瀏覽器重新呈現(xiàn)DOM樹做了幾次呢？一共做了6次。
如果我采取這樣的順序來(lái)編寫代碼呢：
◆創(chuàng)建div，
◆創(chuàng)建5個(gè)img，將其附加在div上。
◆將div附加到document上。
那么瀏覽器重新呈現(xiàn)DOM樹做了幾次呢？只做了1次。
顯然，后面一種方法重新呈現(xiàn)的次數(shù)最少，因此執(zhí)行的效率***，這就是在AjaxinAction中所推薦的方法。
另外，DOM樹上的每個(gè)節(jié)點(diǎn)都是一個(gè)非常龐大的對(duì)象。為了直觀地了解DOM文檔對(duì)象模型節(jié)點(diǎn)是如何龐大，可以使用Firefox中的DOM檢查器任意打開一個(gè)DOM節(jié)點(diǎn)，其中屬性的數(shù)量會(huì)讓你大吃一驚，尤其是style數(shù)組中的屬性數(shù)量。因此當(dāng)動(dòng)態(tài)創(chuàng)建的DOM節(jié)點(diǎn)不再使用時(shí)，一定要及時(shí)釋放掉（就是將到它的引用全部設(shè)置為null，使其處于不可達(dá)的狀態(tài)，以便垃圾回收器能夠及時(shí)將其回收）。如果沒(méi)有及時(shí)釋放不用的DOM節(jié)點(diǎn)，一段時(shí)間之后可能會(huì)造成驚人的內(nèi)存泄漏。
***再說(shuō)一下，innerHTML這個(gè)屬性并不是W3CDOM的標(biāo)準(zhǔn)屬性。這個(gè)屬性最初是IE的發(fā)明，但是開發(fā)者使用起來(lái)非常方便，于是成為了事實(shí)上的標(biāo)準(zhǔn)。其他所有主流的瀏覽器也都支持這個(gè)屬性，所以可以放心使用。而outerHTML、innerText則只有IE支持，在開發(fā)跨瀏覽器的Ajax應(yīng)用時(shí)，不應(yīng)該使用這兩個(gè)屬性。
【編輯推薦】
- JavaScript DOM特性與應(yīng)用詳解
- W3C DOM模型用法詳解
- 深入學(xué)習(xí)DOM模型基礎(chǔ)
- 深入了解JavaScript HTML DOM對(duì)象
- 術(shù)語(yǔ)匯編 Javascript DOM技術(shù)探究
名稱欄目：探究DOM文檔對(duì)象模型用法
網(wǎng)址分享：http://m.5511xx.com/article/dhshodj.html
