<html> <head> <title>Trees, trees, everywhere</title> </head> <body> <h1>Trees, trees, everywhere</h1> <p>Welcome to a <em>really</em> boring page.</p> <div> Come again soon. <img src="come-again.gif" /> </div> </body> </html> |
對象的值
既然瞭解了一些基本的術語，現在應該關注一下其中包含元素名稱和文本的小矩形了（圖 1）。每個矩形是一個對象；瀏覽器在其中解決一些文本問題。通過使用對象來表示 HTML 文檔的每一部分，可以很容易地更改組織、應用樣式、允許 JavaScript 訪問文檔，等等。
物件類型和屬性
標記的每個可能類型都有自己的物件類型。例如，HTML 中的元素用 Element 物件類型表示。文檔中的文本用 Text 類型表示，屬性用 Attribute 類型表示，以此類推。
所以 網頁瀏覽器不僅可以使用物件模型來表示文檔（從而避免了處理靜態文本），還可以用物件類型立即辨別出某事物是什麼。HTML 文檔被解析並轉換為對象集合，如 圖 1 所示，然後角括弧和逸出序列（例如，使用 < 表示 <，使用 > 表示 >）等事物不再是問題了。這就使得瀏覽器的工作（至少在解析輸入 HTML 之後）變得更容易。弄清某事物究竟是元素還是屬性並確定如何處理該類型的對象，這些操作都十分簡單了。
通過使用對象，網頁瀏覽器可以更改這些對象的屬性。例如，每個元素對象具有一個父元素和一系列子項目。所以添加新的子項目或文本只需要向元素的子項目列表中添加一個新的子項目。這些對象還具有 style 屬性，所以快速更改元素或文本段的樣式非常簡單。例如，要使用 JavaScript 更改 div 的高度，如下所示：
someDiv.style.height = "300px"; |
換句話說，網頁瀏覽器使用對象屬性可以非常容易地更改樹的外觀和結構。將之比作瀏覽器在內部將頁面表示為文本時必須進行的複雜事情，每次更改屬性或結構都需要瀏覽器重新編寫靜態檔案、重新解析並在螢幕上重新顯示。有了對象，所有這一切都解決了。
DOM 簡介
到目前為止，您已經知道瀏覽器將 Web 頁面轉換為對象表示，可能您甚至會猜想，對象表示是 DOM 樹。DOM 表示 Document Object Model，是一個規範，可從 World Wide Web Consortium (W3C) 獲得（您可以參閱 參考資料 中的一些 DOM 相關連結）。
但更重要的是，DOM 定義了對象的類型和屬性，從而允許瀏覽器表示標記。（本系列下一篇文章將專門講述在 JavaScript 和 Ajax 代碼中使用 DOM 的規範。）
文檔對象
首先，需要訪問物件模型本身。這非常容易；要在運行於 Web 頁面上的任何 JavaScript 代碼中使用內建 document 變數，可以編寫如下代碼：
var domTree = document; |
當然，該代碼本身沒什麼用，但它示範了每個 網頁瀏覽器使得 document 對象可用於 JavaScript 代碼，並示範了對象表示標記的完整樹（圖 1）。
每項都是一個節點
顯然，document 對象很重要，但這隻是開始。在進一步深入之前，需要學習另一個術語：節點。您已經知道標記的每個部分都由一個對象表示，但它不只是一個任意的對象，它是特定類型的對象，一個 DOM 節點。更特定的類型，比如文本、元素和屬性，都繼承自這個基本的節點類型。所以可以有文本節點、元素節點和屬性節點。
如果已經有很多 JavaScript 編程經驗，那您可能已經在使用 DOM 代碼了。如果到目前為止您一直在跟蹤本 Ajax 系列，那麼現在您一定 使用 DOM 代碼有一段時間了。例如，程式碼 var number = document.getElementById("phone").value; 使用 DOM 尋找特定元素，然後檢索該元素的值（在本例中是一個表單欄位）。所以即使您沒有意識到這一點，但您每次將 document 鍵入 JavaScript 代碼時都會使用 DOM。
詳細解釋已經學過的術語，DOM 樹是對象的樹，但更具體地說，它是節點 對象的樹。在 Ajax 應用程式中或任何其他 JavaScript 中，可以使用這些節點產生下列效果，比如移除元素及其內容，反白特定文本，或添加新映像元素。因為都發生在用戶端（運行在 網頁瀏覽器中的代碼），所以這些效果立即發生，而不與伺服器通訊。最終結果通常是應用程式感覺起來響應更快，因為當請求轉向伺服器時以及解釋響應時，Web 頁面上的內容更改不會出現長時間的停頓。
在多數程式設計語言中，需要學習每種節點類型的實際對象名稱，學習可用的屬性，並弄清楚類型和強制轉換；但在 JavaScript 中這都不是必需的。您可以只建立一個變數，並為它分配您希望的對象（正如您已經看到的）：
var domTree = document; var phoneNumberElement = document.getElementById("phone"); var phoneNumber = phoneNumberElement.value; |
沒有類型，JavaScript 根據需要建立變數並為其分配正確的類型。這也是簡單的JS獲得DOM元素。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
