對象的值

既然了解了一些基本的術(shù)語,，現(xiàn)在應(yīng)該關(guān)注一下其中包含元素名稱和文本的小矩形了（圖 1）。每個(gè)矩形是一個(gè)對象,；瀏覽器在其中解決一些文本問題,。通過使用對象來表示 HTML 文檔的每一部分，可以很容易地更改組織,、應(yīng)用樣式、允許 JavaScript 訪問文檔,，等等,。

對象類型和屬性

標(biāo)記的每個(gè)可能類型都有自己的對象類型。例如,，HTML 中的元素用 Element 對象類型表示,。文檔中的文本用 Text 類型表示，屬性用 Attribute 類型表示,，以此類推,。

所以 Web 瀏覽器不僅可以使用對象模型來表示文檔（從而避免了處理靜態(tài)文本），還可以用對象類型立即辨別出某事物是什么,。HTML 文檔被解析并轉(zhuǎn)換為對象集合,，如 圖 1 所示，然后尖括號和轉(zhuǎn)義序列（例如,，使用 < 表示 <,，使用 > 表示 >）等事物不再是問題了,。這就使得瀏覽器的工作（至少在解析輸入 HTML 之后）變得更容易。弄清某事物究竟是元素還是屬性并確定如何處理該類型的對象,，這些操作都十分簡單了,。

通過使用對象，Web 瀏覽器可以更改這些對象的屬性,。例如,，每個(gè)元素對象具有一個(gè)父元素和一系列子元素。所以添加新的子元素或文本只需要向元素的子元素列表中添加一個(gè)新的子元素,。這些對象還具有 style 屬性,，所以快速更改元素或文本段的樣式非常簡單。例如,，要使用 JavaScript 更改 div 的高度,，如下所示：

someDiv.style.height = "300px";
            

換句話說，Web 瀏覽器使用對象屬性可以非常容易地更改樹的外觀和結(jié)構(gòu),。將之比作瀏覽器在內(nèi)部將頁面表示為文本時(shí)必須進(jìn)行的復(fù)雜事情,，每次更改屬性或結(jié)構(gòu)都需要瀏覽器重新編寫靜態(tài)文件、重新解析并在屏幕上重新顯示,。有了對象,，所有這一切都解決了。

DOM 簡介

到目前為止,，您已經(jīng)知道瀏覽器將 Web 頁面轉(zhuǎn)換為對象表示,，可能您甚至?xí)孪耄瑢ο蟊硎臼?DOM 樹,。DOM 表示 Document Object Model,，是一個(gè)規(guī)范，可從 World Wide Web Consortium (W3C) 獲得（您可以參閱 參考資料 中的一些 DOM 相關(guān)鏈接）,。

但更重要的是,，DOM 定義了對象的類型和屬性，從而允許瀏覽器表示標(biāo)記,。（本系列下一篇文章將專門講述在 JavaScript 和 Ajax 代碼中使用 DOM 的規(guī)范,。）

文檔對象

首先，需要訪問對象模型本身,。這非常容易,；要在運(yùn)行于 Web 頁面上的任何 JavaScript 代碼中使用內(nèi)置 document 變量，可以編寫如下代碼：

var domTree = document;
            

當(dāng)然,，該代碼本身沒什么用,，但它演示了每個(gè) Web 瀏覽器使得 document 對象可用于 JavaScript 代碼，并演示了對象表示標(biāo)記的完整樹（圖 1）,。

每項(xiàng)都是一個(gè)節(jié)點(diǎn)

顯然,，document 對象很重要,，但這只是開始。在進(jìn)一步深入之前,，需要學(xué)習(xí)另一個(gè)術(shù)語：節(jié)點(diǎn),。您已經(jīng)知道標(biāo)記的每個(gè)部分都由一個(gè)對象表示，但它不只是一個(gè)任意的對象,，它是特定類型的對象,，一個(gè) DOM 節(jié)點(diǎn)。更特定的類型,，比如文本,、元素和屬性，都繼承自這個(gè)基本的節(jié)點(diǎn)類型,。所以可以有文本節(jié)點(diǎn),、元素節(jié)點(diǎn)和屬性節(jié)點(diǎn)。

如果已經(jīng)有很多 JavaScript 編程經(jīng)驗(yàn),，那您可能已經(jīng)在使用 DOM 代碼了,。如果到目前為止您一直在跟蹤本 Ajax 系列，那么現(xiàn)在您一定 使用 DOM 代碼有一段時(shí)間了,。例如,，代碼行 var number = document.getElementById("phone").value; 使用 DOM 查找特定元素，然后檢索該元素的值（在本例中是一個(gè)表單字段）,。所以即使您沒有意識(shí)到這一點(diǎn),，但您每次將 document 鍵入 JavaScript 代碼時(shí)都會(huì)使用 DOM。

詳細(xì)解釋已經(jīng)學(xué)過的術(shù)語,，DOM 樹是對象的樹,，但更具體地說，它是節(jié)點(diǎn) 對象的樹,。在 Ajax 應(yīng)用程序中或任何其他 JavaScript 中,，可以使用這些節(jié)點(diǎn)產(chǎn)生下列效果，比如移除元素及其內(nèi)容,，突出顯示特定文本,，或添加新圖像元素,。因?yàn)槎及l(fā)生在客戶端（運(yùn)行在 Web 瀏覽器中的代碼）,，所以這些效果立即發(fā)生，而不與服務(wù)器通信,。最終結(jié)果通常是應(yīng)用程序感覺起來響應(yīng)更快,，因?yàn)楫?dāng)請求轉(zhuǎn)向服務(wù)器時(shí)以及解釋響應(yīng)時(shí)，Web 頁面上的內(nèi)容更改不會(huì)出現(xiàn)長時(shí)間的停頓,。

在多數(shù)編程語言中,，需要學(xué)習(xí)每種節(jié)點(diǎn)類型的實(shí)際對象名稱,，學(xué)習(xí)可用的屬性，并弄清楚類型和強(qiáng)制轉(zhuǎn)換,；但在 JavaScript 中這都不是必需的,。您可以只創(chuàng)建一個(gè)變量，并為它分配您希望的對象（正如您已經(jīng)看到的）：

var domTree = document;
            var phoneNumberElement = document.getElementById("phone");
            var phoneNumber = phoneNumberElement.value;
            

沒有類型,，JavaScript 根據(jù)需要?jiǎng)?chuàng)建變量并為其分配正確的類型,。這也是簡單的JS獲得DOM元素。