掌握Ajax，第4部分: 利用DOM進行Web響應

將 HTML 轉換為物件模型

簡介：程式員（使用後端應用程式）和 Web 程式員（編寫 HTML、CSS 和 JavaScript 上）之間的分 水嶺是長久存在的。但是，Document Object Model (DOM) 彌補了這個裂縫，使得在後端使用 XML 同時 在前端使用 HML 切實可行，並成為極其有效工具。在本文中，Brett McLaughlin 介紹了 Document Object Model，解釋它在 Web 頁面中的應用，並開始挖掘其在 JavaScript 中的用途。

與許多 Web 程式員一樣，您可能使用過 HTML。HTML 是程式員開始與 Web 頁面打交道的方式；HTML 通常是他們完成應用程式或網站前的最後一步——調整一些布局、顏色或樣式。不過，雖然經常使用 HTML，但對於 HTML 轉到瀏覽器呈現在螢幕上時到底發生了什麼，人們普遍存在誤解。在我分析您認為可 能發生的事情及其可能錯誤的原因之前，我希望您對設計和服務 Web 頁面時涉及的過程一清二楚：

1.一些人（通常是您！）在文字編輯器或 IDE 中建立 HTML。

2.然後您將 HTML 上傳到 Web 服務 器，例如 Apache HTTPD，並將其公開在 Internet 或 intranet 上。

3.使用者用 Firefox 或 SafariA 等瀏覽器請求您的 Web 頁面。

4.使用者的瀏覽器向您的伺服器請求 HTML。

5.瀏覽器將從伺服器接收 到的頁面以圖形和文本方式呈現；使用者看到並啟用 Web 頁面。

這看起來非常基礎，但事情很快會變得 有趣起來。事實上，步驟 4 和步驟 5 之間發生的巨大數量的 “填充物（stuff）” 就是本文的焦點。 術語 “填充物” 也十分適用，因為多數程式員從來沒有真正考慮過當使用者瀏覽器請求顯示標記時到底在 標記身上發生了什麼。

是否瀏覽器只是讀取 HTML 中的文本並將其顯示？

CSS 呢？尤其是當 CSS 位於外部檔案時。

JavaScript 呢？它也通常位於外部檔案中。

瀏覽器如何處理這些項，如果將事件處理常式、函數 和樣式映射到該文本標記？

實踐證明，所有這些問題的答案都是 Document Object Model。因此，廢 話少說，直接研究 DOM。

Web 程式員和標記

對於多數程式員，當 網頁瀏覽器開始時他們的工作就結束了。也就是說，將一個 HTML 檔案放入 網頁瀏覽器的目錄上後，您通常就認為它已經“完成”，而且（滿懷希望地）認為再也不會考慮它！說到編寫 乾淨、組織良好的頁面時，這也是一個偉大的目標；希望您的標記跨瀏覽器、用各種版本的 CSS 和 JavaScript 顯示它應該顯示的內容，一點錯都沒有。

問題是這種方法限制了程式員對瀏覽器中真正發生的事情的理解。更重要的是，它限制了您用用戶端 JavaScript 動態更新、更改和重構 Web 頁面的能力。擺脫這種限制，讓您的 Web 網站擁有更大的互動 性和創造性。