DOM文檔對象模型總體介紹

1、DOM文檔對象模型總體介紹 第4章 DOM文檔對象模型介紹 DOM是Document Object Module的縮寫，即文檔對 象模型。DOM是表示文檔，訪問和操作文檔元素的 應(yīng)用程序接口（API），所有支持JavaScript的 web瀏覽器都支持DOM。本書中介紹的DOM實(shí)際上是 指W3C DOM，即由World Wide Web委員會(huì)定義的標(biāo) 準(zhǔn)文檔對象模型，其包含了傳統(tǒng)web瀏覽器所實(shí)現(xiàn) 的DOM模型的所有特性。DOMHTML及XML的操作。 DOM文檔對象模型總體介紹 4.1 基本概念 本節(jié)向讀者介紹DOM的基本概念，包括DOM的體系 結(jié)構(gòu)（樹形結(jié)構(gòu)）、節(jié)點(diǎn)及其組成部分、節(jié)點(diǎn)的 類

2、型以及節(jié)點(diǎn)之間的關(guān)系。 DOM文檔對象模型總體介紹 4.1.1 樹形結(jié)構(gòu) 在DOM中，HTML 文檔的層次結(jié) 構(gòu)被表示為一 個(gè)樹形結(jié)構(gòu)。 樹的根節(jié)點(diǎn)是 一個(gè)表示當(dāng)前 HTML文檔的 Document對象， 樹的每個(gè)子節(jié) 點(diǎn)表示HTML文 檔中的不同內(nèi) 容。 DOM文檔對象模型總體介紹 4.1.2 節(jié)點(diǎn)的類型和組成 每個(gè)節(jié)點(diǎn)都由一個(gè)Node對象表示，Node對象提供 了nodeType屬性來表示節(jié)點(diǎn)的類型。DOM為不同類 型的節(jié)點(diǎn)提供了相應(yīng)的接口，當(dāng)知道一個(gè)節(jié)點(diǎn)為 某種類型時(shí)，則可以使用相應(yīng)的接口所定義的屬 性和方法。 DOM文檔對象模型總體介紹 4.1.3 節(jié)點(diǎn)之間的關(guān)系 節(jié)點(diǎn)與節(jié)點(diǎn)之間通常有

3、3種關(guān)系：父子關(guān)系、兄弟關(guān)系和祖 孫關(guān)系。在圖4.1中，節(jié)點(diǎn)是節(jié)點(diǎn)和節(jié)點(diǎn) 的父節(jié)點(diǎn)，和節(jié)點(diǎn)是節(jié)點(diǎn)的子 節(jié)點(diǎn)，而和互為兄弟關(guān)系。同樣，節(jié) 點(diǎn)是和節(jié)點(diǎn)的父節(jié)點(diǎn)，和節(jié)點(diǎn)是節(jié) 點(diǎn)的子節(jié)點(diǎn)，和節(jié)點(diǎn)互為兄弟節(jié)點(diǎn)。一個(gè)節(jié)點(diǎn)的父 節(jié)點(diǎn)以上級別的節(jié)點(diǎn)，稱為這個(gè)節(jié)點(diǎn)的祖先節(jié)點(diǎn)，這個(gè)節(jié) 點(diǎn)稱為祖先節(jié)點(diǎn)的子孫節(jié)點(diǎn)。例如節(jié)點(diǎn)是節(jié)點(diǎn)的 祖先節(jié)點(diǎn)，節(jié)點(diǎn)是節(jié)點(diǎn)的子孫節(jié)點(diǎn)。DOM為Node 對象提供了一組屬性來表達(dá)這些關(guān)系，使得程序可以非常 方便的獲得對節(jié)點(diǎn)的引用。關(guān)于這些屬性的知識將在下一 節(jié)中向讀者介紹。 DOM文檔對象模型總體介紹 4.2 節(jié)點(diǎn)的引用 需要對一個(gè)節(jié)點(diǎn)做相應(yīng)操作時(shí)，首先需要獲得對 這個(gè)節(jié)點(diǎn)的引用。DOM定義

4、了大量的屬性和方法可 以使程序方便的獲得對目標(biāo)節(jié)點(diǎn)的引用。下面向 讀者一一介紹。 DOM文檔對象模型總體介紹 4.2.1 根據(jù)id屬性引用節(jié)點(diǎn) 在HTML中，可以給節(jié)點(diǎn)添加一個(gè)id屬性，從而通 過document對象的getElementById方法來查找擁 有指定id屬性值的節(jié)點(diǎn)。 DOM文檔對象模型總體介紹 4.2.2 根據(jù)name屬性引用節(jié)點(diǎn) 通過docment對象的getElementsByName方法可以 取得文檔中所有具有指定name屬性的節(jié)點(diǎn)的集合， 該方法返回的是一個(gè)數(shù)組。 DOM文檔對象模型總體介紹 4.2.3 根據(jù)標(biāo)簽名引用節(jié)點(diǎn) Node對象提供了getElementsBy

5、TagName方法來查 找所有標(biāo)簽名與給定參數(shù)一致的下屬節(jié)點(diǎn)，該方 法返回一個(gè)數(shù)組。在介紹document對象的links屬 性時(shí)，已經(jīng)向讀者介紹過一個(gè)改變文檔中所有鏈 接背景色的示例。 DOM文檔對象模型總體介紹 4.2.4 引用父節(jié)點(diǎn) Node對象提供了parentNode屬性來引用當(dāng)前節(jié)點(diǎn) 的父節(jié)點(diǎn)。在下面的示例中，程序給頁面所有的 li時(shí)間注冊了click事件的處理程序，單擊li元素， 則在指定的div中顯示父節(jié)點(diǎn)的id。 DOM文檔對象模型總體介紹 4.2.5 引用子節(jié)點(diǎn) Node對象提供了3個(gè)屬性來引用其直屬子節(jié)點(diǎn)，分 別是childNodes、firstChild和lastChi

6、ld。 childNodes屬性來引用其所有的直屬子節(jié)點(diǎn)。 firstChild屬性等于childNodes返回的元素集合 中的第一個(gè)元素。lastChild屬性等于childNodes 返回的元素集合中的最后一個(gè)元素。在下面的示 例中，首先獲取文檔中的ul元素，然后通過 firstChild、lastChild和childNodes屬性給第一 個(gè)li節(jié)點(diǎn)和最后一個(gè)li節(jié)點(diǎn)以及剩下的其他節(jié)點(diǎn) 設(shè)置3種不同的背景色。 DOM文檔對象模型總體介紹 4.2.6 引用相鄰的節(jié)點(diǎn) Node對象的previousSibling和nextSibling屬性 保存了節(jié)點(diǎn)的上一個(gè)和下一個(gè)兄弟節(jié)點(diǎn)的引用。 在下面

7、的示例中，通過給li節(jié)點(diǎn)定義事件處理程 序，使得當(dāng)鼠標(biāo)劃過li節(jié)點(diǎn)時(shí)，li節(jié)點(diǎn)本身的背 景色變?yōu)榧t色，其相鄰兩個(gè)li節(jié)點(diǎn)的背景色變?yōu)?黃色，當(dāng)鼠標(biāo)劃離li元素時(shí)，回復(fù)原樣。 DOM文檔對象模型總體介紹 4.3 節(jié)點(diǎn)的操作 上一節(jié)向讀者介紹了各種獲得節(jié)點(diǎn)引用的方法， 這一節(jié)向讀者介紹針對節(jié)點(diǎn)的基本操作。DOM提供 了豐富的方法來支持對節(jié)點(diǎn)的基本操作：即創(chuàng)建、 添加、修改和刪除節(jié)點(diǎn)。本節(jié)將會(huì)輔以實(shí)例向讀 者詳細(xì)介紹。 DOM文檔對象模型總體介紹 4.3.1 創(chuàng)建元素節(jié)點(diǎn) 當(dāng)需要?jiǎng)?chuàng)建一個(gè)元素節(jié)點(diǎn)時(shí)，可以使用document 對象的createElement方法。該方法接受一個(gè)標(biāo)識 需要?jiǎng)?chuàng)建的元素的標(biāo)

8、簽名的字符串參數(shù)，返回對 被創(chuàng)建的節(jié)點(diǎn)的引用。 DOM文檔對象模型總體介紹 4.3.2 創(chuàng)建文本節(jié)點(diǎn) 使用createTextNode方法可以創(chuàng)建一個(gè)文本節(jié)點(diǎn)， 該方法接受一個(gè)字符串作為創(chuàng)建的文本節(jié)點(diǎn)的文 本值。示例代碼如下。 document.createTextNode(It is a text node); DOM文檔對象模型總體介紹 4.3.3 添加節(jié)點(diǎn) Node對象提供了appendChild方法來將程序創(chuàng)建的 節(jié)點(diǎn)，添加到父節(jié)點(diǎn)的直屬子節(jié)點(diǎn)列表的末尾。 該方法也可作用于已經(jīng)存在于DOM樹中的節(jié)點(diǎn)，執(zhí) 行方法后會(huì)改變節(jié)點(diǎn)在DOM樹中的位置，而不是插 入一個(gè)新的節(jié)點(diǎn)。 DOM文檔對象模

9、型總體介紹 4.3.4 插入子節(jié)點(diǎn) Node對象提供了insertBefore方法來將新節(jié)點(diǎn)插 入到指定子節(jié)點(diǎn)的前面，其語法格式如下所示。 parentNode.insertBefore(newNode,childNode); DOM文檔對象模型總體介紹 4.3.5 替換子節(jié)點(diǎn) Node對象提供了replaceChild方法來使用一個(gè)新 的節(jié)點(diǎn)替換一個(gè)子節(jié)點(diǎn)，其語法格式如下所示。 parentNode.replaceChild(newNode,childNode); DOM文檔對象模型總體介紹 4.3.6 復(fù)制節(jié)點(diǎn) Node對象提供了cloneNode方法來得到Node對象的 一個(gè)副本。clo

10、neNode方法接受一個(gè)布爾值參數(shù)， 來標(biāo)識返回的節(jié)點(diǎn)副本中是否包含原節(jié)點(diǎn)的子節(jié) 點(diǎn)。當(dāng)參數(shù)為true時(shí)，則包含子節(jié)點(diǎn)；當(dāng)參數(shù)為 false時(shí)，則不包含子節(jié)點(diǎn)。 DOM文檔對象模型總體介紹 4.3.7 刪除子節(jié)點(diǎn) Node對象提供了removeChild方法來刪除一個(gè)直屬 子節(jié)點(diǎn)，該方法接受一個(gè)參數(shù)，為需要參數(shù)的子 節(jié)點(diǎn)的引用?；菊Z法如下所示。 parentNode.removeChild(childNode); DOM文檔對象模型總體介紹 4.3.8 讀取節(jié)點(diǎn)屬性 使用Node對象的getAttribute方法可以得到節(jié)點(diǎn) 的某一屬性的值，該方法接受一個(gè)屬性名作為參 數(shù)，返回指定屬性的值。

11、例如有一a元素。 Robin Chen DOM文檔對象模型總體介紹 4.3.9 添加和修改屬性節(jié)點(diǎn) 當(dāng)需要添加或者修改一個(gè)屬性節(jié)點(diǎn)時(shí)，可以使用 Node對象的setAttribute方法。W3C并沒有為這兩 部操作提供兩部不同的方法，而是將這兩項(xiàng)功能 集中到了setAttribute這一個(gè)方法上。 setAttribute方法的基本語法格式如下所示。 node.setAttribute(attName,attValue); DOM文檔對象模型總體介紹 4.3.10 刪除屬性節(jié)點(diǎn) 當(dāng)需要?jiǎng)h除一個(gè)節(jié)點(diǎn)的某個(gè)屬性時(shí)，可以使用 removeAttribute方法。removeAttribute方法接

12、受一個(gè)參數(shù)，表明了需要?jiǎng)h除的屬性的名稱。其 基本語法格式如下所示。 node.removeAttribute(attName); DOM文檔對象模型總體介紹 4.4 控制元素的樣式 上一節(jié)向讀者介紹了常見的針對節(jié)點(diǎn)的基本操作。 DOM也提供了接口來支持針對元素節(jié)點(diǎn)CSS樣式的 操作。通過設(shè)置元素的class屬性和操作元素的 style屬性，可以達(dá)到控制元素CSS樣式的目的。 本節(jié)將向讀者介紹相關(guān)的知識。 DOM文檔對象模型總體介紹 4.4.1 獲取和設(shè)置元素的CSS類 通過設(shè)置元素的class屬性，可以為元素指定一個(gè) css類來設(shè)置元素的樣式。 DOM文檔對象模型總體介紹 4.4.2 獲取和設(shè)

13、置元素樣式 DOM為Node對象定義了style屬性，以此作為對CSS 樣式操作的接口。元素的style屬性是一個(gè)對象， 保存了元素的CSS樣式信息。例如 node.style.backgroundColor保存了背景色的信 息，node.style.color保存了文字顏色的信息。 DOM文檔對象模型總體介紹 4.5 事件處理 事件處理是DOM中最重要的組成部分。事件驅(qū)動(dòng)是 現(xiàn)代面向?qū)ο缶幊痰幕痉椒?，完善的事件機(jī)制 使JavaScript程序可以根據(jù)特定的事件來觸發(fā)不 同執(zhí)行方法，使得程序可以更具有交互性和智能 化。在本書之前的許多示例中，讀者已經(jīng)見過事 件的使用。本節(jié)將向讀者詳細(xì)介紹DO

14、M的事件模型。 DOM文檔對象模型總體介紹 4.5.1 事件模型和傳播機(jī)制 目前主流瀏覽器所使用的事件模型主要為標(biāo)準(zhǔn)事 件模型和IE事件模型。IE事件模型由IE瀏覽器使 用，而標(biāo)準(zhǔn)事件模型由W3C制訂，由Netscape等瀏 覽器實(shí)現(xiàn)。 DOM文檔對象模型總體介紹 4.5.2 注冊事件處理程序 注冊一個(gè)事件處理程序有三種方法。第一種方法 是作為節(jié)點(diǎn)的屬性直接將時(shí)間處理程序?qū)懺趯傩?值中。在之前的很多示例中，讀者已經(jīng)見過了這 種方法。 Document.getaelementById(btnclck).oncli ck=function() setSize(11); DOM文檔對象模型總體介紹

15、4.5.3 注銷事件處理程序 當(dāng)不再需要一個(gè)事件處理程序時(shí)，可以將其注銷。 使用節(jié)點(diǎn)屬性或者對象屬性注冊的事件處理程序， 可以通過將對象的相應(yīng)屬性設(shè)置為null來注銷該 事件處理程序。使用attachEvent或 addEventListener注冊的事件處理程序，可以使 用對應(yīng)的detachEvent或removeEventListener來 注銷。 DOM文檔對象模型總體介紹 4.5.4 事件對象 在前面介紹事件模型時(shí)，已經(jīng)向讀者簡單介紹過 事件對象的作用，就是在事件發(fā)生時(shí)生成事件對 象，保存到window對象的event屬性中（IE事件模 型），或者當(dāng)作第一個(gè)參數(shù)傳遞給事件處理程序 （標(biāo)

16、準(zhǔn)事件模型）。事件對象保存了事件的相關(guān) 信息，例如事件的類型、發(fā)生事件的目標(biāo)元素等 等。 見136頁 表4-2 DOM文檔對象模型總體介紹 4.5.5 常用事件 在學(xué)習(xí)了事件處理函數(shù)的注冊和注銷，已經(jīng)事件 對象的使用后，讀者一定很想知道有哪些事件可 以使用。 見139頁表4-3 DOM文檔對象模型總體介紹 4.6 應(yīng)用實(shí)例 本節(jié)綜合本章中向讀者介紹的有關(guān)DOM的知識，來 編寫兩個(gè)常見的JavaScript應(yīng)用。一個(gè)是懸浮的 廣告，另外一個(gè)是可拖動(dòng)的層。建議讀者自己將 代碼輸入到編輯器中，并保存為HTML頁面，然后 到瀏覽器中查看效果，以加深記憶和理解。對于 示例中出現(xiàn)的一些本章中未說明的內(nèi)容，可以查 閱本書附錄中的DOM