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

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

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

1.4.1  DOM的工作原理

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

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

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

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

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

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

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