JavaScript 文檔對(duì)象模型

文檔對(duì)象模型

在瀏覽器窗口中的每個(gè)網(wǎng)頁都可以看作一個(gè)對(duì)象。

文檔對(duì)象就代表了在瀏覽器窗口中顯示的那個(gè) HTML 文檔。文檔對(duì)象有很多屬性表示其他的一些對(duì)象，通過對(duì)這些屬性的操作，我們就可以訪問或者修改文檔的內(nèi)容。

對(duì)文檔對(duì)象的訪問和修改的方式被稱為文檔對(duì)象模型，或者稱為DOM。這些對(duì)象是按照繼承關(guān)系組織在一起的。這個(gè)繼承關(guān)系結(jié)構(gòu)用來將網(wǎng)頁文檔對(duì)象聯(lián)系在一起。

• 窗口對(duì)象: 繼承關(guān)系中的最頂層。它是繼承結(jié)構(gòu)中對(duì)頂層的元素。
• 文檔對(duì)象: 每一個(gè)被加載到窗口中的 HTML 對(duì)象變成了文檔對(duì)象。文檔對(duì)象中包含了網(wǎng)頁的內(nèi)容。
• 表單對(duì)象： 任何以 <form>...</form> 標(biāo)簽圈起來的內(nèi)容是表單對(duì)象。
• 表單控制元素： 這個(gè)表單對(duì)象包含表單中定義的所有元素，例如文本框，按鈕，單選按鈕和多選按鈕。

如下是一些重要對(duì)象的繼承結(jié)構(gòu)圖：

有幾個(gè)文檔對(duì)象是已經(jīng)實(shí)現(xiàn)了的。下面的部分詳細(xì)的介紹這些文檔對(duì)象，并且介紹你如何利用這些對(duì)象訪問和修改文檔內(nèi)容。

• 傳統(tǒng)的文檔對(duì)象模型： 這個(gè)模型是在 JavaScript 語言早期版本中引入的。它能夠很好的被所有的瀏覽器支持，但是僅僅只被允許訪問文檔某些確定的關(guān)鍵區(qū)域，比如，表單，表單元素和圖像。
• W3C 文檔對(duì)象模型： 這種文檔對(duì)象模型允許訪問和修改所有的文檔內(nèi)容，而且它是被萬維網(wǎng)組織標(biāo)準(zhǔn)化的。這種模型基本上被所有的現(xiàn)代瀏覽器支持。
• IE4 文檔對(duì)象模型： 這種文檔對(duì)象模型是由微軟的 IE 瀏覽器的第四版本而引入的。IE 5和之后的瀏覽器版本能夠支持 W3C 文檔對(duì)象模型的大多數(shù)特性。

文檔對(duì)象的兼容性

如果你想寫個(gè)腳本，當(dāng) W3C 文檔對(duì)象模型可用的時(shí)候，利用這種模型，而當(dāng) IE 4文檔對(duì)象模型有效的時(shí)候，利用 IE 4文檔對(duì)象模型，因此，你可以利用兼容性測試的方法，這種方法首先檢測已經(jīng)存在的方法或者屬性，從而去決定瀏覽器是否能夠兼容你想要的文檔對(duì)象模型。例如：

    if (document.getElementById) {

         // If the W3C method exists, use it

    }

    else if (document.all) {

        // If the all[] array exists, use it

    }

    else {

        // Otherwise use the legacy DOM

    }