?? 掌握 ajax，第 4 部分 利用 dom 進(jìn)行 web 響應(yīng).htm
字號(hào):
border=0><TBODY>
<TR>
<TD width=10><IMG height=1 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進(jìn)行 Web 響應(yīng).files/c.gif" width=10></TD>
<TD>
<TABLE cellSpacing=0 cellPadding=5 width="100%" border=1>
<TBODY>
<TR>
<TD bgColor=#eeeeee><A
name=additional><B>關(guān)于標(biāo)記的其他想法</B></A><BR>
<P><B>純文本編輯：是對(duì)是錯(cuò)？</B><BR>純文本是存儲(chǔ)標(biāo)記的理想選擇，但是不適合<I>編輯</I>
標(biāo)記。大行其道的是使用 IDE，比如 Macromedia DreamWeaver 或更強(qiáng)勢(shì)點(diǎn)的
Microsoft? FrontPage?，來操作 Web 頁面標(biāo)記。這些環(huán)境通常提供快捷方式和幫助來創(chuàng)建
Web 頁面，尤其是在使用 CSS 和 JavaScript
時(shí)，二者都來自實(shí)際頁面標(biāo)記以外的文件。許多人仍偏愛好用古老的記事本或
vi（我承認(rèn)我也是其中一員），這并不要緊。不管怎樣，最終結(jié)果都是充滿標(biāo)記的文本文件。</P>
<P><B>網(wǎng)絡(luò)上的文本：好東西</B><BR>已經(jīng)說過，文本是文檔的最好媒體，比如 HTML 或
CSS，在網(wǎng)絡(luò)上被千百次地傳輸。當(dāng)我說瀏覽器表示文本很難時(shí)，是特指將文本轉(zhuǎn)換為用戶查看的可視圖形頁面。這與瀏覽器實(shí)際上如何從
Web
瀏覽器檢索頁面沒有關(guān)系；在這種情況下，文本仍然是最佳選擇。</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P><A name=N100FB><SPAN class=smalltitle>文本標(biāo)記的優(yōu)點(diǎn)</SPAN></A></P>
<P>在討論 Web 瀏覽器之前，值得考慮一下為什么純文本<I>絕對(duì)</I> 是存儲(chǔ) HTML 的最佳選擇（有關(guān)詳細(xì)信息，請(qǐng)參閱 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#additional">有關(guān)標(biāo)記的一些其他想法</A>）。不考慮優(yōu)缺點(diǎn)，只是回憶一下在每次查看頁面時(shí)
HTML 是通過網(wǎng)絡(luò)發(fā)送到 Web
瀏覽器的（為了簡(jiǎn)潔，不考慮高速緩存等）。真是再?zèng)]有比傳遞文本再有效的方法了。二進(jìn)制對(duì)象、頁面圖形表示、重新組織的標(biāo)記塊等等，所有這一切都比純文本文件通過網(wǎng)絡(luò)傳遞要更困難。</P>
<P>此外，瀏覽器也為此增光添彩。今天的瀏覽器允許用戶更改文本大小、按比例伸縮圖像、下載頁面的 CSS 或
JavaScript（大多數(shù)情況），甚至更多，這完全排除了將任何類型的頁面圖形表示發(fā)送到瀏覽器上。但是，瀏覽器需要原
HTML，這樣它才能在瀏覽器中對(duì)頁面應(yīng)用任何處理，而不是信任瀏覽器去處理該任務(wù)。同樣地，將 CSS 從 JavaScript 分離和將
CSS 從 HTML 標(biāo)記分離要求一種容易分離的格式。文本文件又一次成為該任務(wù)的最好方法。</P>
<P>最后但同樣重要的一點(diǎn)是，記住，新標(biāo)準(zhǔn)（比如 HTML 4.01 與 XHTML 1.0 和
1.1）承諾將內(nèi)容（頁面中的數(shù)據(jù)）與表示和樣式（通常由 CSS 應(yīng)用）分離。如果程序員要將 HTML 與 CSS
分離，然后強(qiáng)制瀏覽器檢索粘結(jié)頁面各部分的一些頁面表示，這會(huì)失去這些標(biāo)準(zhǔn)的多數(shù)優(yōu)點(diǎn)。保持這些部分到達(dá)瀏覽器時(shí)都一直分離使得瀏覽器在從服務(wù)器獲取
HTML 時(shí)有了前所未有的靈活性。</P>
<P><A name=N10111><SPAN class=atitle>進(jìn)一步了解 Web 瀏覽器</SPAN></A></P>
<P>對(duì)于一些 Web 程序員來說，在前文閱讀到的所有內(nèi)容可能是對(duì)您在 Web
開發(fā)過程中角色的滑稽講述。但說到瀏覽器的行為，許多最能干的 Web 設(shè)計(jì)人員和開發(fā)人員通常都沒有意識(shí)到 “內(nèi)幕”
的實(shí)際狀況。我將在本節(jié)重點(diǎn)進(jìn)行講述。不要擔(dān)心，代碼很快就到，但是要克制您編碼的急躁心情，因?yàn)檎嬲私?Web
瀏覽器的確切行為對(duì)于您的代碼正確工作是非常關(guān)鍵的。</P>
<P><A name=N1011B><SPAN class=smalltitle>文本標(biāo)記的缺點(diǎn)</SPAN></A></P>
<P>正如文本標(biāo)記對(duì)于設(shè)計(jì)人員和頁面創(chuàng)建者具有驚人的優(yōu)點(diǎn)之外，它對(duì)于瀏覽器也具有相當(dāng)出奇的缺點(diǎn)。具體來說，瀏覽器很難直接將文本標(biāo)記可視地表示給用戶（詳細(xì)信息請(qǐng)參閱
<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#additional">有關(guān)標(biāo)記的一些其他想法</A>）。考慮下列常見的瀏覽器任務(wù)：</P>
<UL>
<LI>基于元素類型、類、ID 及其在 HTML 文檔中的位置，將 CSS 樣式（通常來自外部文件中的多個(gè)樣式表）應(yīng)用于標(biāo)記。
<LI>基于 JavaScript 代碼（通常位于外部文件）將樣式和格式應(yīng)用于 HTML 文檔的不同部分。
<LI>基于 JavaScript 代碼更改表單字段的值。
<LI>基于 JavaScript 代碼，支持可視效果，比如圖像翻轉(zhuǎn)和圖像交換。 </LI></UL>
<P>復(fù)雜性并不在于編碼這些任務(wù)；其中每件事都是相當(dāng)容易的。復(fù)雜性來自實(shí)際實(shí)現(xiàn)請(qǐng)求動(dòng)作的瀏覽器。如果標(biāo)記存儲(chǔ)為文本，比如，想要在
<CODE>center-text</CODE> 類的 <CODE>p</CODE> 元素中輸入文本
(<CODE>text-align: center</CODE>)，如何實(shí)現(xiàn)呢？</P>
<UL>
<LI>將內(nèi)聯(lián)樣式添加到文本嗎？
<LI>將樣式應(yīng)用到瀏覽器中的 HTML 文本，并只保持內(nèi)容居中或不居中？
<LI>應(yīng)用無樣式的 HTML，然后事后應(yīng)用格式？ </LI></UL>
<P>這些非常困難的問題是如今很少有人編寫瀏覽器的原因。（編寫瀏覽器的人應(yīng)該接受最由衷的感謝）</P>
<P>無疑，純文本不是存儲(chǔ)瀏覽器 HTML 的好辦法，盡管文本是獲取頁面標(biāo)記最好的解決方案。如果加上 JavaScript
<I>更改</I> 頁面結(jié)構(gòu)的能力，事情就變得有些微妙了。瀏覽器應(yīng)該將修改過的結(jié)構(gòu)重新寫入磁盤嗎？如何才能保持文檔的最新版本呢？</P>
<P>無疑，文本不是答案。它難以修改，為其應(yīng)用樣式和行為很困難，與今天 Web 頁面的動(dòng)態(tài)本質(zhì)在根本上相去甚遠(yuǎn)。</P>
<P><A name=N1015E><SPAN class=smalltitle>求助于樹視圖</SPAN></A></P>
<P>這個(gè)問題的答案（至少是由當(dāng)今 Web 瀏覽器選擇的答案）是使用樹結(jié)構(gòu)來表示 HTML。參見 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing1">清單
1</A>，這是一個(gè)表示為本文標(biāo)記的相當(dāng)簡(jiǎn)單又無聊的 HTML 頁面。</P><BR><BR><A
name=listing1><B>清單 1. 文本標(biāo)記中的簡(jiǎn)單 HTML 頁面</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<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>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>瀏覽器接受該頁面并將之轉(zhuǎn)換為樹形結(jié)構(gòu)，如圖 1 所示。</P><BR><BR><A name=fig1><B>圖 1. 清單 1
的樹視圖</B></A><BR><IMG height=478 alt="清單 1 的樹視圖"
src="掌握 Ajax，第 4 部分 利用 DOM 進(jìn)行 Web 響應(yīng).files/tree.gif" width=422> <BR>
<P>為了保持本文的進(jìn)度，我做了少許簡(jiǎn)化。DOM 或 XML 方面的專家會(huì)意識(shí)到空白對(duì)于文檔文本在 Web
瀏覽器樹結(jié)構(gòu)中表示和分解方式的影響。膚淺的了解只會(huì)使事情變得模棱兩可，所以如果想弄清空白的影響，那最好不過了；如果不想的話，那可以繼續(xù)讀下去，不要考慮它。當(dāng)它成為問題時(shí)，那時(shí)您就會(huì)明白您需要的一切。</P>
<P>除了實(shí)際的樹背景之外，可能會(huì)首先注意到樹中的一切是以最外層的 HTML 包含元素，即 <CODE>html</CODE>
元素開始的。使用樹的比喻，這叫做<I>根元素</I>。所以即使這是樹的底層，當(dāng)您查看并分析樹的時(shí)候，我也通常以此開始。如果它確實(shí)奏效，您可以將整個(gè)樹顛倒一下，但這確實(shí)有些拓展了樹的比喻。</P>
<P>從根流出的線表示不同標(biāo)記部分之間的關(guān)系。<CODE>head</CODE> 和 <CODE>body</CODE> 元素是
<CODE>html</CODE> 根元素的<I>孩子</I>；<CODE>title</CODE> 是
<CODE>head</CODE> 的孩子，而文本 “Trees, trees, everywhere” 是
<CODE>title</CODE> 的孩子。整個(gè)樹就這樣組織下去，直到瀏覽器獲得與 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">圖
1</A> 類似的結(jié)構(gòu)。</P>
<P><A name=N101B6><SPAN class=smalltitle>一些附加術(shù)語</SPAN></A></P>
<P>為了沿用樹的比喻，<CODE>head</CODE> 和 <CODE>body</CODE> 被叫做
<CODE>html</CODE>
的<I>分支（branches）</I>。叫分支是因?yàn)樗鼈冇凶约旱暮⒆印．?dāng)?shù)竭_(dá)樹的末端時(shí)，您將進(jìn)入主要的文本，比如 “Trees,
trees, everywhere” 和
“really”；這些通常稱為<I>葉子</I>，因?yàn)樗鼈儧]有自己的孩子。您不需要記住所有這些術(shù)語，當(dāng)您試圖弄清楚特定術(shù)語的意思時(shí)，只要想像一下樹結(jié)構(gòu)就容易多了。</P>
<P><A name=N101D1><SPAN class=atitle>對(duì)象的值</SPAN></A></P>
<P>既然了解了一些基本的術(shù)語，現(xiàn)在應(yīng)該關(guān)注一下其中包含元素名稱和文本的小矩形了（<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">圖
1</A>）。每個(gè)矩形是一個(gè)對(duì)象；瀏覽器在其中解決一些文本問題。通過使用對(duì)象來表示 HTML
文檔的每一部分，可以很容易地更改組織、應(yīng)用樣式、允許 JavaScript 訪問文檔，等等。</P>
<P><A name=N101DF><SPAN class=smalltitle>對(duì)象類型和屬性</SPAN></A></P>
<P>標(biāo)記的每個(gè)可能類型都有自己的對(duì)象類型。例如，HTML 中的元素用 <CODE>Element</CODE>
對(duì)象類型表示。文檔中的文本用 <CODE>Text</CODE> 類型表示，屬性用 <CODE>Attribute</CODE>
類型表示，以此類推。</P>
<P>所以 Web 瀏覽器不僅可以使用對(duì)象模型來表示文檔（從而避免了處理靜態(tài)文本），還可以用對(duì)象類型立即辨別出某事物是什么。HTML
文檔被解析并轉(zhuǎn)換為對(duì)象集合，如 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">圖
1</A> 所示，然后尖括號(hào)和轉(zhuǎn)義序列（例如，使用 <CODE><</CODE> 表示 <CODE><</CODE>，使用
<CODE>></CODE> 表示 <CODE>></CODE>）等事物不再是問題了。這就使得瀏覽器的工作（至少在解析輸入
HTML 之后）變得更容易。弄清某事物究竟是元素還是屬性并確定如何處理該類型的對(duì)象，這些操作都十分簡(jiǎn)單了。</P>
<P>通過使用對(duì)象，Web
瀏覽器可以更改這些對(duì)象的屬性。例如，每個(gè)元素對(duì)象具有一個(gè)父元素和一系列子元素。所以添加新的子元素或文本只需要向元素的子元素列表中添加一個(gè)新的子元素。這些對(duì)象還具有
<CODE>style</CODE> 屬性，所以快速更改元素或文本段的樣式非常簡(jiǎn)單。例如，要使用 JavaScript 更改
<CODE>div</CODE> 的高度，如下所示：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>someDiv.style.height = "300px";
</PRE></TD></TR></TBODY></TABLE><BR>
<P>換句話說，Web
瀏覽器使用對(duì)象屬性可以非常容易地更改樹的外觀和結(jié)構(gòu)。將之比作瀏覽器在內(nèi)部將頁面表示為文本時(shí)必須進(jìn)行的復(fù)雜事情，每次更改屬性或結(jié)構(gòu)都需要瀏覽器重新編寫靜態(tài)文件、重新解析并在屏幕上重新顯示。有了對(duì)象，所有這一切都解決了。</P>
<P>現(xiàn)在，花點(diǎn)時(shí)間展開一些 HTML
文檔并用樹將其勾畫出來。盡管這看起來是個(gè)不尋常的請(qǐng)求（尤其是在包含極少代碼的這樣一篇文章中），如果您希望能夠操縱這些樹，那么需要熟悉它們的結(jié)構(gòu)。</P>
<P>在這個(gè)過程中，可能會(huì)發(fā)現(xiàn)一些古怪的事情。比如，考慮下列情況：</P>
<UL>
<LI>屬性發(fā)生了什么？
<LI>分解為元素（比如 <CODE>em</CODE> 和 <CODE>b</CODE>）的文本呢？
<LI>結(jié)構(gòu)不正確（比如當(dāng)缺少結(jié)束 <CODE>p</CODE> 標(biāo)記時(shí)）的 HTML 呢？ </LI></UL>
<P>一旦熟悉這些問題之后，就能更好地理解下面幾節(jié)了。</P>
<P><A name=N1023F><SPAN class=smalltitle>嚴(yán)格有時(shí)是好事</SPAN></A></P>
<P>如果嘗試剛提到的練習(xí) I，您可能會(huì)發(fā)現(xiàn)標(biāo)記的樹視圖中存在一些潛在問題（如果不練習(xí)的話，那就聽我說吧！）。事實(shí)上，在 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing1">清單
1</A> 和 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">圖
1</A> 中就會(huì)發(fā)現(xiàn)一些問題，首先看 <CODE>p</CODE> 元素是如何分解的。如果您問通常的 Web 開發(fā)人員
“<CODE>p</CODE> 元素的文本內(nèi)容是什么”，最常見的答案將是 “Welcome to a really boring Web
page.”。如果將之與圖 1 做比較，將會(huì)發(fā)現(xiàn)這個(gè)答案（雖然合乎邏輯）是根本不正確的。</P>
<P>實(shí)際上，<CODE>p</CODE> 元素具有<I>三個(gè)</I> 不同的子對(duì)象，其中沒有一個(gè)包含完整的 “Welcome to a
really boring Web page.” 文本。您會(huì)發(fā)現(xiàn)文本的一部分，比如 “Welcome to a ” 和 “ boring
Web page”，但不是全部。為了理解這一點(diǎn)，記住標(biāo)記中的任何內(nèi)容都必須轉(zhuǎn)換為某種類型的對(duì)象。</P>
<P>此外，順序無關(guān)緊要！如果瀏覽器顯示正確的對(duì)象，但顯示順序與您在 HTML 中提供的順序不同，那么您能想像出用戶將如何響應(yīng) Web
瀏覽器嗎？段落夾在頁面標(biāo)題和文章標(biāo)題中間，而這不是您自己組織文檔時(shí)的樣式呢？很顯然，瀏覽器必須保持元素和文本的順序。 </P>
<P>在本例中，<CODE>p</CODE> 元素有三個(gè)不同部分： </P>
<UL>
<LI><CODE>em</CODE> 元素之前的文本
<LI><CODE>em</CODE> 元素本身
<LI><CODE>em</CODE> 元素之后的文本 </LI></UL>
<P>如果將該順序打亂，可能會(huì)把重點(diǎn)放在文本的錯(cuò)誤部分。為了保持一切正常，<CODE>p</CODE> 元素有三個(gè)子對(duì)象，其順序是在
<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing1">清單
1</A> 的 HTML 中顯示的順序。而且，重點(diǎn)文本 “really” <I>不是</I> <CODE>p</CODE>
的子元素；而是 <CODE>p</CODE> 的子元素 <CODE>em</CODE> 的子元素。</P>
<P>理解這一概念非常重要。盡管 “really” 文本將可能與其他 <CODE>p</CODE> 元素文本一起顯示，但它仍是
<CODE>em</CODE> 元素的直接子元素。它可以具有與其他 <CODE>p</CODE>
文本不同的格式，而且可以獨(dú)立于其他文本到處移動(dòng)。</P>
<P>要將之牢記在心，試著用圖表示清單 <A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing2">2</A>
和 <A
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -