JavaScript語言與Ajax應(yīng)用第04章文檔對象模型（DOM）

《JavaScript語言與Ajax應(yīng)用第04章文檔對象模型（DOM）》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、JavaScript語言與Ajax應(yīng)用（第二版）主編董寧陳丹中國水利水電出版社第4章文檔對象模型（DOM）目錄第4章文檔對象模型（DOM）4.1DOM基礎(chǔ)4.2在DOM元素間移動4.3處理元素屬性4.4通過CSS類名獲取DOM元素4.5修改DOM中的元素4.1DOM基礎(chǔ)第4章文檔對象模型（DOM）通過JavaScript，我們可以重構(gòu)整個HTML文檔，可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個部分，JavaScript就需要對HTML文檔中所有元素設(shè)置進行訪問的接口。通過這個接口，可以提供對HTML元素進行添加、移動、改變或移除的方法和屬性，這些都由文檔對象模

2、型（DOM）來實現(xiàn)。4.1DOM基礎(chǔ)第4章文檔對象模型（DOM）4.1.1DOM簡介DOM的全稱是DocumentObjectModel，即文檔對象模型。在瀏覽器中，基于DOM的HTML分析器將一個頁面轉(zhuǎn)換成一個對象模型的集合（通常稱DOM樹），瀏覽器正是通過對這個對象模型的操作，來實現(xiàn)對HTML頁面的顯示。通過DOM接口，JavaScript可以在任何時候訪問HTML文檔中的任何一部分數(shù)據(jù)，因此，利用DOM接口可以無限制的操作HTML頁面。4.1DOM基礎(chǔ)第4章文檔對象模型（DOM）DOM接口提供了一種通過分層對象模型來訪問HTML頁面的方式，這些分層對象模型依據(jù)HTML

3、的文檔結(jié)構(gòu)形成了一棵節(jié)點樹。也就是說，DOM強制使用樹模型來訪問HTML頁面中的元素。由于HTML本質(zhì)上就是一種分層結(jié)構(gòu)，所以這種描述方法是相當(dāng)有效的。對于HTML頁面開發(fā)來說，DOM就是一個對象化的HTML數(shù)據(jù)接口，一個與語言無關(guān)、與平臺無關(guān)的標(biāo)準(zhǔn)接口規(guī)范。它定義了HTML文檔的邏輯結(jié)構(gòu)，給出了一種訪問和處理HTML文檔的方法。利用DOM，程序開發(fā)人員可以動態(tài)地創(chuàng)建文檔，遍歷文檔結(jié)構(gòu)，添加、修改、刪除文檔內(nèi)容，改變文檔的顯示方式等等?？梢赃@樣說，HTML文檔代表的是頁面，而DOM則代表了如何去操作頁面。無論是在瀏覽器里還是在瀏覽器外，無論是在服務(wù)器上還是在客戶端，只要有用

4、到HTML的地方，就會碰到對DOM的應(yīng)用4.1DOM基礎(chǔ)第4章文檔對象模型（DOM）4.1.2DOM樹的結(jié)構(gòu)前面我們講過，DOM為我們提供的訪問文檔信息的媒介是一種分層對象模型，而這個層次的結(jié)構(gòu)，則是一棵根據(jù)文檔生成的節(jié)點樹。在對文檔進行分析之后，不管這個文檔有多簡單或者多復(fù)雜，其中的信息都會被轉(zhuǎn)化成一棵對象節(jié)點樹。在這棵節(jié)點樹中，有一個根節(jié)點即Document節(jié)點，所有其他的節(jié)點都是根節(jié)點的后代節(jié)點。節(jié)點樹生成之后，就可以通過DOM接口訪問、修改、添加、刪除、創(chuàng)建樹中的節(jié)點和內(nèi)容。4.1DOM基礎(chǔ)第4章文檔對象模型（DOM）DOM中的節(jié)點有Document、Element

5、、Comment、Type等不同類型，其中每一個DOM樹必須有一個Document節(jié)點，并且為節(jié)點樹的根節(jié)點。它可以有子節(jié)點如Text節(jié)點、Comment節(jié)點等。具體來講，DOM節(jié)點樹中的節(jié)點有元素節(jié)點、文本節(jié)點和屬性節(jié)點等三種不同的類型，4.1DOM基礎(chǔ)第4章文檔對象模型（DOM）1．元素節(jié)點(elementnode)在HTML文檔中，各HTML元素如、

、

等構(gòu)成文檔結(jié)構(gòu)模型的一個元素對象。在節(jié)點樹中，每個元素對象又構(gòu)成了一個節(jié)點。元素可以包含其它的元素，例如在下面的“購物清單”代碼中：
• Beans

  6、>

• Cheese
• Milk