?? 掌握 ajax，第 4 部分 利用 dom 進行 web 響應.htm
字號:
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing3">3</A>
中的 HTML，確保文本具有正確的父元素（而不管文本最終會如何顯示在屏幕上）。</P><BR><BR><A
name=listing2><B>清單 2. 帶有巧妙元素嵌套的標記</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<title>This is a little tricky</title>
</head>
<body>
<h1>Pay <u>close</u> attention, OK?</h1>
<div>
<p>This p really isn't <em>necessary</em>, but it makes the
<span id="bold-text">structure <i>and</i> the organization</span>
of the page easier to keep up with.</p>
</div>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR><BR><BR><A name=listing3><B>清單
3. 更巧妙的元素嵌套</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<title>Trickier nesting, still</title>
</head>
<body>
<div id="main-body">
<div id="contents">
<table>
<tr><th>Steps</th><th>Process</th></tr>
<tr><td>1</td><td>Figure out the <em>root element</em>.</td></tr>
<tr><td>2</td><td>Deal with the <span id="code">head</span> first,
as it's usually easy.</td></tr>
<tr><td>3</td><td>Work through the <span id="code">body</span>.
Just <em>take your time</em>.</td></tr>
</table>
</div>
<div id="closing">
This link is <em>not</em> active, but if it were, the answers
to this <a href="answers.html"><img src="exercise.gif" /></a> would
be there. But <em>do the exercise anyway!</em>
</div>
</div>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>在本文末的 GIF 文件 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig2">圖
2 中的 tricky-solution.gif</A> 和 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig3">圖
3 中的 trickier-solution.gif</A>
中將會找到這些練習的答案。不要偷看，先花些時間自動解答一下。這樣能幫助您理解組織樹時應用的規則有多么嚴格，并真正幫助您掌握 HTML
及其樹結構。</P>
<P><A name=N102D4><SPAN class=smalltitle>屬性呢？</SPAN></A></P>
<P>當您試圖弄清楚如何處理屬性時，是否遇到一些問題呢？前已提及，屬性確實具有自己的對象類型，但屬性確實不是顯示它的元素的子元素，嵌套元素和文本不在同一屬性
“級別”，您將注意到，清單 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing2">2</A>
和 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing3">3</A>
中練習的答案沒有顯示屬性。</P>
<P>屬性事實上存儲在瀏覽器使用的對象模型中，但它們有一些特殊情況。每個元素都有可用屬性的列表，且與子對象列表是分離的。所以
<CODE>div</CODE> 元素可能有一個包含屬性 “id” 和另一個屬性 “class” 的列表。</P>
<P>記住，元素的屬性必須具有惟一的名稱，也就是說，一個元素不能有兩個 “id” 或兩個 “class”
屬性。這使得列表易于維護和訪問。在下一篇文章將會看到，您可以簡單調用諸如 <CODE>getAttribute("id")</CODE>
的方法來按名稱獲取屬性的值。還可以用相似的方法調用來添加屬性或設置（重置）現有屬性的值。</P>
<P>值得指出的是，屬性名的惟一性使得該列表不同于子對象列表。<CODE>p</CODE> 元素可以有多個
<CODE>em</CODE>
元素，所以子對象列表可以包含多個重復項。盡管子項列表和屬性列表的操作方式相似，但一個可以包含重復項（對象的子項），而一個不能（元素對象的屬性）。最后，只有元素具有屬性，所以文本對象沒有用于存儲屬性的附加列表。</P>
<P><A name=N102FE><SPAN class=smalltitle>凌亂的 HTML</SPAN></A></P>
<P>在繼續之前，談到瀏覽器如何將標記轉換為樹表示，還有一個主題值得探討，即瀏覽器如何處理不是格式良好的標記。<I>格式良好</I> 是
XML 廣泛使用的一個術語，有兩個基本意思：</P>
<UL>
<LI>每個開始標記都有一個與之匹配的結束標記。所以每個 <CODE><p></CODE> 在文檔中與
<CODE></p></CODE> 匹配，每個 <CODE><div></CODE> 與
<CODE></div></CODE> 匹配，等等。
<LI>最里面的開始標記與最里面的結束標記相匹配，然后次里面的開始標記與次里面的結束標記相匹配，依此類推。所以
<CODE><b><i>bold and
italics</b></i></CODE> 是不合法的，因為最里面的開始標記
<CODE><i></CODE> 與最里面的結束標記 <CODE><b></CODE>
匹配不當。要使之格式良好，<I>要么</I> 切換開始標記順序，<I>要么</I>
切換結束標記順序。（如果兩者都切換，則仍會出現問題）。 </LI></UL>
<P>深入研究這兩條規則。這兩條規則不僅簡化了文檔的組織，還消除了不定性。是否應先應用粗體后應用斜體？或恰恰相反？如果覺得這種順序和不定性不是大問題，那么請記住，CSS
允許規則覆蓋其他規則，所以，例如，如果 <CODE>b</CODE> 元素中文本的字體不同于 <CODE>i</CODE>
元素中的字體，則格式的應用順序將變得非常重要。因此，HTML 的格式良好性有著舉足輕重的作用。</P>
<P>如果瀏覽器收到了不是格式良好的文檔，它只會盡力而為。得到的樹結構在最好情況下將是作者希望的原始頁面的近似，最壞情況下將面目全非。如果您曾將頁面加載到瀏覽器中后看到完全出乎意料的結果，您可能在看到瀏覽器結果時會猜想您的結構應該如何，并沮喪地繼續工作。當然，搞定這個問題相當簡單：確保文檔是格式良好的！如果不清楚如何編寫標準化的
HTML，請咨詢 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#resources">參考資料</A>
獲得幫助。</P>
<P><A name=N10347><SPAN class=atitle>DOM 簡介</SPAN></A></P>
<P>到目前為止，您已經知道瀏覽器將 Web 頁面轉換為對象表示，可能您甚至會猜想，對象表示是 DOM 樹。DOM 表示
Document Object Model，是一個規范，可從 World Wide Web Consortium (W3C)
獲得（您可以參閱 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#resources">參考資料</A>
中的一些 DOM 相關鏈接）。</P>
<P>但更重要的是，DOM 定義了對象的類型和屬性，從而允許瀏覽器表示標記。（本系列下一篇文章將專門講述在 JavaScript 和
Ajax 代碼中使用 DOM 的規范。）</P>
<P><A name=N10358><SPAN class=smalltitle>文檔對象</SPAN></A></P>
<P>首先，需要訪問對象模型本身。這非常容易；要在運行于 Web 頁面上的任何 JavaScript 代碼中使用內置
<CODE>document</CODE> 變量，可以編寫如下代碼：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>var domTree = document;
</PRE></TD></TR></TBODY></TABLE><BR>
<P>當然，該代碼本身沒什么用，但它演示了每個 Web 瀏覽器使得 <CODE>document</CODE> 對象可用于
JavaScript 代碼，并演示了對象表示標記的完整樹（<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">圖
1</A>）。</P>
<P><A name=N10375><SPAN class=smalltitle>每項都是一個節點</SPAN></A></P>
<P>顯然，<CODE>document</CODE>
對象很重要，但這只是開始。在進一步深入之前，需要學習另一個術語：<I>節點</I>。您已經知道標記的每個部分都由一個對象表示，但它不只是一個任意的對象，它是特定類型的對象，一個
DOM 節點。更特定的類型，比如文本、元素和屬性，都繼承自這個基本的節點類型。所以可以有文本節點、元素節點和屬性節點。</P>
<P>如果已經有很多 JavaScript 編程經驗，那您可能已經在使用 DOM 代碼了。如果到目前為止您一直在跟蹤本 Ajax
系列，那么現在您<I>一定</I> 使用 DOM 代碼有一段時間了。例如，代碼行 <CODE>var number =
document.getElementById("phone").value;</CODE> 使用 DOM
查找特定元素，然后檢索該元素的值（在本例中是一個表單字段）。所以即使您沒有意識到這一點，但您每次將
<CODE>document</CODE> 鍵入 JavaScript 代碼時都會使用 DOM。</P>
<P>詳細解釋已經學過的術語，DOM 樹是對象的樹，但更具體地說，它是<I>節點</I> 對象的樹。在 Ajax 應用程序中或任何其他
JavaScript
中，可以使用這些節點產生下列效果，比如移除元素及其內容，突出顯示特定文本，或添加新圖像元素。因為都發生在客戶端（運行在 Web
瀏覽器中的代碼），所以這些效果立即發生，而不與服務器通信。最終結果通常是應用程序感覺起來響應更快，因為當請求轉向服務器時以及解釋響應時，Web
頁面上的內容更改不會出現長時間的停頓。</P>
<P>在多數編程語言中，需要學習每種節點類型的實際對象名稱，學習可用的屬性，并弄清楚類型和強制轉換；但在 JavaScript
中這都不是必需的。您可以只創建一個變量，并為它分配您希望的對象（正如您已經看到的）：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber = phoneNumberElement.value;
</PRE></TD></TR></TBODY></TABLE><BR>
<P>沒有類型，JavaScript 根據需要創建變量并為其分配正確的類型。結果，從 JavaScript 中使用 DOM
變得微不足道（將來有一篇文章會專門講述與 XML 相關的 DOM，那時將更加巧妙）。</P>
<P><A name=N103A4><SPAN class=atitle>結束語</SPAN></A></P>
<P>在這里，我要給您留一點懸念。顯然，這并非是對 DOM 完全詳盡的說明；事實上，本文不過是 DOM 的簡介。DOM
的內容要遠遠多于我今天介紹的這些！</P>
<P>本系列的下一篇文章將擴展這些觀點，并深入探討如何在 JavaScript 中使用 DOM 來更新 Web 頁面、快速更改 HTML
并為您的用戶創建更交互的體驗。在后面專門講述在 Ajax 請求中使用 XML 的文章中，我將再次返回來討論 DOM。所以要熟悉
DOM，它是 Ajax 應用程序的一個主要部分。</P>
<P>此時，深入了解 DOM 將十分簡單，比如詳細設計如何在 DOM
樹中移動、獲得元素和文本的值、遍歷節點列表，等等，但這可能會讓您有這種印象，即 DOM 是關于代碼的，而事實上并非如此。</P>
<P>在閱讀下一篇文章之前，試著思考一下樹結構并用一些您自己的 HTML 實踐一下，以查看 Web 瀏覽器是如何將 HTML
轉換為標記的樹視圖的。此外，思考一下 DOM 樹的組織，并用本文介紹的特殊情況實踐一下：屬性、有元素混合在其中的文本、<I>沒有</I>
文本內容的元素（比如 <CODE>img</CODE> 元素）。</P>
<P>如果扎實掌握了這些概念，然后學習了 JavaScript 和 DOM 的語法（下一篇文章），則會使得響應更為容易。</P>
<P>而且不要忘了，這里有清單 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing2">2</A>
和 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing3">3</A>
的答案，其中還包含了示例代碼！</P><BR><BR><A name=fig2><B>圖 2. 清單 2
的答案</B></A><BR><IMG height=400 alt="清單 2 的答案"
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/tricky-solution.gif"
width=407> <BR><BR><BR><A name=fig3><B>圖 3. 清單 3 的答案</B></A><BR><IMG
height=316 alt="清單 3 的答案"
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web ?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -