1. 簡單 HTML 頁面
<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 的樹視圖
清單 1 的樹視圖
[img]http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/tree.gif[/img]
對象的值
既然瞭解了一些基本的術語，現在應該關注一下其中包含元素名稱和文本的小矩形了（圖 1）。每個矩形是一個對象；瀏覽器在其中解決一些文本問題。通過使用對象來表示 HTML 文檔的每一部分，可以很容易地更改組織、應用樣式、允許 JavaScript 訪問文檔，等等。
對象類型和屬性
標記的每個可能類型都有自己的對象類型。例如，HTML 中的元素用 Element 對象類型表示。文檔中的文本用 Text 類型表示，屬性用 Attribute 類型表示，以此類推。
所以 Web 瀏覽器不僅可以使用對象模型來表示文檔（從而避免了處理靜態文本），還可以用對象類型立即辨別出某事物是什麼。HTML 文檔被解析並轉換爲對象集合，如 圖 1 所示，然後尖括號和轉義序列（例如，使用 < 表示 <，使用 > 表示 >）等事物不再是問題了。這就使得瀏覽器的工作（至少在解析輸入 HTML 之後）變得更容易。弄清某事物究竟是元素還是屬性並確定如何處理該類型的對象，這些操作都十分簡單了。
通過使用對象，Web 瀏覽器可以更改這些對象的屬性。例如，每個元素對象具有一個父元素和一系列子元素。所以添加新的子元素或文本只需要向元素的子元素列表中添加一個新的子元素。這些對象還具有 style 屬性，所以快速更改元素或文本段的樣式非常簡單。例如，要使用 JavaScript 更改 div 的高度，如下所示：
someDiv.style.height = "300px";
換句話說，Web 瀏覽器使用對象屬性可以非常容易地更改樹的外觀和結構。將之比作瀏覽器在內部將頁面表示爲文本時必須進行的複雜事情，每次更改屬性或結構都需要瀏覽器重新編寫靜態文件、重新解析並在屏幕上重新顯示。有了對象，所有這一切都解決了。
DOM 簡介
到目前爲止，您已經知道瀏覽器將 Web 頁面轉換爲對象表示，可能您甚至會猜想，對象表示是 DOM 樹。DOM 表示 Document Object Model，是一個規範，可從 World Wide Web Consortium (W3C) 獲得（您可以參閱 參考資料 中的一些 DOM 相關鏈接）。
但更重要的是，DOM 定義了對象的類型和屬性，從而允許瀏覽器表示標記。（本系列下一篇文章將專門講述在 JavaScript 和 Ajax 代碼中使用 DOM 的規範。）
文檔對象
首先，需要訪問對象模型本身。這非常容易；要在運行於 Web 頁面上的任何 JavaScript 代碼中使用內置 document 變量，可以編寫如下代碼：
var domTree = document;
當然，該代碼本身沒什麼用，但它演示了每個 Web 瀏覽器使得 document 對象可用於 JavaScript 代碼，並演示了對象表示標記的完整樹（圖 1）。
每項都是一個節點
顯然，document 對象很重要，但這只是開始。在進一步深入之前，需要學習另一個術語：節點。您已經知道標記的每個部分都由一個對象表示，但它不只是一個任意的對象，它是特定類型的對象，一個 DOM 節點。更特定的類型，比如文本、元素和屬性，都繼承自這個基本的節點類型。所以可以有文本節點、元素節點和屬性節點。
如果已經有很多 JavaScript 編程經驗，那您可能已經在使用 DOM 代碼了。如果到目前爲止您一直在跟蹤本 Ajax 系列，那麼現在您一定 使用 DOM 代碼有一段時間了。例如，代碼行 var number = document.getElementById("phone").value; 使用 DOM 查找特定元素，然後檢索該元素的值（在本例中是一個表單字段）。所以即使您沒有意識到這一點，但您每次將 document 鍵入 JavaScript 代碼時都會使用 DOM。
詳細解釋已經學過的術語，DOM 樹是對象的樹，但更具體地說，它是節點 對象的樹。在 Ajax 應用程序中或任何其他 JavaScript 中，可以使用這些節點產生下列效果，比如移除元素及其內容，突出顯示特定文本，或添加新圖像元素。因爲都發生在客戶端（運行在 Web 瀏覽器中的代碼），所以這些效果立即發生，而不與服務器通信。最終結果通常是應用程序感覺起來響應更快，因爲當請求轉向服務器時以及解釋響應時，Web 頁面上的內容更改不會出現長時間的停頓。
在多數編程語言中，需要學習每種節點類型的實際對象名稱，學習可用的屬性，並弄清楚類型和強制轉換；但在 JavaScript 中這都不是必需的。您可以只創建一個變量，併爲它分配您希望的對象（正如您已經看到的）：
var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber = phoneNumberElement.value;
沒有類型，JavaScript 根據需要創建變量併爲其分配正確的類型。這也是簡單的JS獲得DOM元素。
Ajax學習（2）---DOM進行Web響應
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Fay框架文檔-帶貨版
抖音個性化數字人直播教程 參考安裝說明搭建配置好控制器，抖音輸入源需開啓 啓動bin/Release_2.85/2.85.exe 抖音源碼： https://github.com/wwengg/