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

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

DOM文檔對(duì)象模型

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

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

用簡單通俗的語言來說，DOM文檔對(duì)象模型使得你可以訪問頁面上的標(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文檔對(duì)象模型將整個(gè)HTML文檔展現(xiàn)為內(nèi)存中的一棵樹狀結(jié)構(gòu)（瀏覽器內(nèi)存中僅僅只有一棵這樣的HTMLDOM樹，其根節(jié)點(diǎn)為document對(duì)象），每個(gè)元素、屬性都是樹上的一個(gè)節(jié)點(diǎn)?？梢酝ㄟ^JavaScript來訪問這棵DOM樹，遍歷樹上的節(jié)點(diǎn)、動(dòng)態(tài)添加、刪除樹上的節(jié)點(diǎn)、設(shè)置或修改某個(gè)節(jié)點(diǎn)的樣式、設(shè)置或修改某個(gè)節(jié)點(diǎn)中保存的數(shù)值等等。通過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元素，如果我采取這樣的順序來編寫代碼：

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

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

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

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

◆創(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í)將其回收）。如果沒有及時(shí)釋放不用的DOM節(jié)點(diǎn)，一段時(shí)間之后可能會(huì)造成驚人的內(nèi)存泄漏。

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

關(guān)于如何使用DOM文檔對(duì)象模型就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享名稱：如何使用DOM文檔對(duì)象模型
本文路徑：http://jinyejixie.com/article32/iiscpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、網(wǎng)站維護(hù)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)