1.4  關(guān)于文檔對(duì)象模型

當(dāng)HTML出現(xiàn)時(shí)，一個(gè)重要的設(shè)計(jì)決定是將其基于DOM(Document Object Model，文檔對(duì)象模型)。這是一種將Web頁(yè)面中的不同元素分成單獨(dú)對(duì)象的方法，每個(gè)對(duì)象有其自己的屬性和值。這是個(gè)明智的決定，因?yàn)檫@樣就引入了樣式表，使得Web頁(yè)面的內(nèi)容與其樣式完全分開(kāi)，同時(shí)使HTML文檔易于用如JavaScript這樣的語(yǔ)言修改，從而提供動(dòng)態(tài)用戶交互功能。

當(dāng)將Web頁(yè)面放入DOM中時(shí)，用CSS樣式化其每個(gè)部分是很容易的。例如，每個(gè)標(biāo)題將位于像<h1>…</h1>這樣的標(biāo)記對(duì)中，單個(gè)CSS指令就可以設(shè)置文檔中所有這樣的標(biāo)記的樣式，如可以改變使用的字體、字體大小及任意字體修飾等。這樣就可以完全改變頁(yè)面設(shè)計(jì)而不修改HTML，正如在后面的一些插件中將看到的，一些樣式設(shè)置甚至可以使頁(yè)面元素在鼠標(biāo)劃過(guò)時(shí)有動(dòng)態(tài)效果(例如，改變其顏色和其他屬性)或使用專(zhuān)門(mén)的瀏覽器擴(kuò)展創(chuàng)建漸變效果。

1.4.1  DOM的工作原理

DOM將HTML文檔的各個(gè)部分組成一個(gè)對(duì)象層次結(jié)構(gòu)，每個(gè)對(duì)象有其自己的屬性。術(shù)語(yǔ)“屬性”用于表示對(duì)象的特性，如對(duì)象包含的HTML、對(duì)象寬度和高度等。

最外層的對(duì)象是window對(duì)象，它表示的是當(dāng)前瀏覽器窗口、tab、iframe或彈出式窗口。在其下是document對(duì)象，可以有多個(gè)文檔(例如將幾個(gè)文檔加載到同一頁(yè)面的不同iframe中)。在文檔中有一些其他對(duì)象，如頁(yè)面頭部和主體等。

在頁(yè)面頭部中，又有其他對(duì)象，如標(biāo)題和元對(duì)象，而主體對(duì)象可包含大量其他對(duì)象，包括標(biāo)題、錨、表單等的HTML標(biāo)記。

圖1-3顯示了示例文檔的DOM表示，其頭部有一個(gè)標(biāo)題Hello和一個(gè)元標(biāo)記，其主體部分有3個(gè)HTML元素(鏈接、表單和圖像)。當(dāng)然，即使是最簡(jiǎn)單的Web頁(yè)面，其結(jié)構(gòu)也比這里的復(fù)雜，這里只是用于演示DOM的工作原理。從最外部開(kāi)始是窗口，其中有一個(gè)文檔，在該文檔中是各種元素或?qū)ο螅鼈兓ハ嗦?lián)系。

在圖1-3中，屬性用較黑的背景和斜體表示。例如，值robots是name的屬性，name又是meta的屬性，依此類(lèi)推。盡管圖中沒(méi)有顯示，元標(biāo)記應(yīng)還有另一個(gè)匹配的屬性content，該屬性包含一個(gè)字符串，指定哪個(gè)機(jī)器人可以訪問(wèn)Web頁(yè)面的內(nèi)容。

其他屬性包括http://google.com(它是href標(biāo)記的屬性，href又是a的屬性，依此類(lèi)推)和Hello(它是title的屬性)。所有其他項(xiàng)均是對(duì)象或?qū)ο髤?shù)名。如果將圖1-3向縱向和橫向擴(kuò)展，則將顯示出其他對(duì)象和屬性。圖中兩個(gè)這樣的地方用斷開(kāi)的虛線表示。

圖1-3  顯示頭部和主體部分的DOM示例