?? 掌握 ajax，第 4 部分 利用 dom 進行 web 響應.htm
字號:
<TD width=10 height=18><IMG height=18 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif" width=10></TD>
<TD width="100%"><IMG height=6 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif"
width=1><BR><A class=bctl
href="http://www.ibm.com/developerworks/cn/">developerWorks
中國</A><SPAN class=bct> > </SPAN><A
class=bctl
href="http://www.ibm.com/developerworks/cn/web/">Web
development</A><SPAN class=bct> | </SPAN><A
class=bctl
href="http://www.ibm.com/developerworks/cn/xml/">XML</A><SPAN
class=bct> | </SPAN><A class=bctl
href="http://www.ibm.com/developerworks/cn/java/">Java
technology</A><SPAN class=bct> | </SPAN><A
class=bctl
href="http://www.ibm.com/developerworks/cn/webservices/">SOA
and Web services</A><SPAN
class=bct> ></SPAN><IMG height=1 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif" width=1><BR>
<H1><SPAN style="COLOR: #999999">掌握 Ajax，第 4 部分: </SPAN>利用 DOM
進行 Web 響應</H1>
<P id=subtitle><EM>將 HTML 轉換為對象模型</EM></P><IMG
class=display-img height=6 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif" width=1></TD>
<TD class=no-print width=192><IMG height=18 alt=developerWorks
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/dw.gif"
width=192></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR vAlign=top>
<TD width=10><IMG height=1 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif" width=10></TD>
<TD width="100%">
<TABLE class=no-print cellSpacing=0 cellPadding=0 width=160
align=right border=0>
<TBODY>
<TR>
<TD width=10><IMG height=1 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif" width=10></TD>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
<TBODY>
<TR>
<TD class=v14-header-1-small>文檔選項</TD></TR></TBODY></TABLE>
<TABLE class=v14-gray-table-border cellSpacing=0 cellPadding=0
border=0>
<TBODY>
<TR>
<TD class=no-padding width=150>
<TABLE cellSpacing=0 cellPadding=0 width=143
border=0><IMG height=1 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif"
width=8>
<FORM name=email
action=https://www.ibm.com/developerworks/secure/email-it.jsp><INPUT
type=hidden
value="程序員（使用后端應用程序）和 Web 程序員（編寫 HTML、CSS 和 JavaScript 上）之間的分水嶺是長久存在的。但是，Document Object Model (DOM) 彌補了這個裂縫，使得在后端使用 XML 同時在前端使用 HML 切實可行，并成為極其有效的工具。在本文中，Brett McLaughlin 介紹了 Document Object Model，解釋它在 Web 頁面中的應用，并開始挖掘其在 JavaScript 中的用途。"
name=body><INPUT type=hidden
value="掌握 Ajax，第 4 部分: 利用 DOM 進行 Web 響應"
name=subject><INPUT type=hidden value=cn name=lang>
<SCRIPT language=JavaScript type=text/javascript><!--document.write('<tr valign="top"><td width="8"><img src="//www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td width="16"><img src="//www.ibm.com/i/v14/icons/em.gif" height="16" width="16" vspace="3" alt="將此頁作為電子郵件發送" /></td><td width="122"><p><a class="smallplainlink" href="javascript:document.email.submit();"><b>將此頁作為電子郵件發送</b></a></p></td></tr>');//--></SCRIPT>
<NOSCRIPT>
<TBODY>
<TR vAlign=top>
<TD width=8><IMG height=1 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif"
width=16></TD>
<TD class=small width=122>
<P><SPAN class=ast>未顯示需要 JavaScript
的文檔選項</SPAN></P></TD></TR></NOSCRIPT></FORM></TBODY></TABLE></TD></TR></TBODY></TABLE><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- 03/20/06 updated by gretchen --><BR>
<TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
<TBODY>
<TR>
<TD class=v14-header-2-small>拓展 Tomcat
應用</TD></TR></TBODY></TABLE>
<TABLE class=v14-gray-table-border cellSpacing=0 cellPadding=0
border=0>
<TBODY>
<TR>
<TD class=no-padding width=150>
<TABLE cellSpacing=0 cellPadding=0 width=143 border=0>
<TBODY>
<TR vAlign=top>
<TD width=8><IMG height=1 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/c.gif"
width=8></TD>
<TD><IMG height=16 alt=""
src="掌握 Ajax，第 4 部分 利用 DOM 進行 Web 響應.files/fw_bold.gif"
width=16 vspace=3 border=0></TD>
<TD width=125>
<P><A class=smallplainlink
href="http://www.ibm.com/developerworks/cn/kickstart/webserver.html?S_TACT=105AGX52&S_CMP=simpleart">下載
IBM 開源 J2EE 應用服務器 WAS CE 新版本 V1.1</A>
</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!--END RESERVED FOR FUTURE USE INCLUDE FILES--><BR></TD></TR></TBODY></TABLE>
<P>級別: 初級</P>
<P><A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#author">Brett
McLaughlin</A> (<A
href="mailto:brett@newInstance.com?subject=利用 DOM 進行 Web 響應&cc=htc@us.ibm.com">mailto:brett@newInstance.com?subject=利用
DOM 進行 Web 響應&cc=htc@us.ibm.com</A>), 作家，編輯, O'Reilly Media
Inc.<BR></P>
<P>2006 年 4 月 10 日</P>
<BLOCKQUOTE>程序員（使用后端應用程序）和 Web 程序員（編寫 HTML、CSS 和 JavaScript
上）之間的分水嶺是長久存在的。但是，Document Object Model (DOM) 彌補了這個裂縫，使得在后端使用 XML
同時在前端使用 HML 切實可行，并成為極其有效的工具。在本文中，Brett McLaughlin 介紹了 Document
Object Model，解釋它在 Web 頁面中的應用，并開始挖掘其在 JavaScript 中的用途。</BLOCKQUOTE><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->
<P>與許多 Web 程序員一樣，您可能使用過 HTML。HTML 是程序員開始與 Web 頁面打交道的方式；HTML
通常是他們完成應用程序或站點前的最后一步——調整一些布局、顏色或樣式。不過，雖然經常使用 HTML，但對于 HTML
轉到瀏覽器呈現在屏幕上時到底發生了什么，人們普遍存在誤解。在我分析您認為可能發生的事情及其可能錯誤的原因之前，我希望您對設計和服務
Web 頁面時涉及的過程一清二楚：</P>
<OL>
<LI>一些人（通常是您！）在文本編輯器或 IDE 中創建 HTML。
<LI>然后您將 HTML 上載到 Web 服務器，例如 Apache HTTPD，并將其公開在 Internet 或
intranet 上。
<LI>用戶用 Firefox 或 SafariA 等瀏覽器請求您的 Web 頁面。
<LI>用戶的瀏覽器向您的服務器請求 HTML。
<LI>瀏覽器將從服務器接收到的頁面以圖形和文本方式呈現；用戶看到并激活 Web 頁面。 </LI></OL>
<P>這看起來非常基礎，但事情很快會變得有趣起來。事實上，步驟 4 和步驟 5 之間發生的巨大數量的 “填充物（stuff）”
就是本文的焦點。術語 “填充物” 也十分適用，因為多數程序員從來沒有真正考慮過當用戶瀏覽器請求顯示標記時到底在標記身上發生了什么。
</P>
<UL>
<LI>是否瀏覽器只是讀取 HTML 中的文本并將其顯示？
<LI>CSS 呢？尤其是當 CSS 位于外部文件時。
<LI>JavaScript 呢？它也通常位于外部文件中。
<LI>瀏覽器如何處理這些項，如果將事件處理程序、函數和樣式映射到該文本標記？ </LI></UL>
<P>實踐證明，所有這些問題的答案都是 Document Object Model。因此，廢話少說，直接研究 DOM。</P>
<P><A name=N10094><SPAN class=atitle>Web 程序員和標記</SPAN></A></P>
<P>對于多數程序員，當 Web 瀏覽器開始時他們的工作就結束了。也就是說，將一個 HTML 文件放入 Web
瀏覽器的目錄上后，您通常就認為它已經“完成”，而且（滿懷希望地）認為<I>再也不會考慮它</I>！說到編寫干凈、組織良好的頁面時，這也是一個偉大的目標；希望您的標記跨瀏覽器、用各種版本的
CSS 和 JavaScript 顯示它應該顯示的內容，一點錯都沒有。</P>
<P>問題是這種方法限制了程序員對瀏覽器中真正發生的事情的理解。更重要的是，它限制了您用客戶端 JavaScript
動態更新、更改和重構 Web 頁面的能力。擺脫這種限制，讓您的 Web 站點擁有更大的交互性和創造性。</P>
<P><A name=N100A4><SPAN class=smalltitle>程序員做什么</SPAN></A></P>
<P>作為典型的 Web 程序員，您可能啟動文本編輯和 IDE 后就開始輸入 HTML、CSS 甚至
JavaScript。很容易認為這些標記、選擇器和屬性只是使站點正確顯示而做的小小的任務。但是，在這一點上您需要拓展您的思路，要意識到您是在組織您的內容。不要擔心；我保證這不會變成關于標記美觀、您必須如何認識到
Web 頁面的真正潛力或其他任何元物質的講座。您需要了解的是您在 Web 開發中到底是什么角色。</P>
<P>說到頁面的外觀，頂多您只能提提建議。您提供 CSS
樣式表時，用戶可以覆蓋您的樣式選擇。您提供字體大小時，用戶瀏覽器可以為視障者更改這些大小，或者在大顯示器（具有同等大的分辨率）上按比例縮小。甚至您選擇的顏色和字體也受制于用戶顯示器和用戶在其系統上安裝的字體。雖然盡您所能來設計頁面樣式很不錯，但這<I>絕不是</I>
您對 Web 頁面的最大影響。</P>
<P>您絕對控制的是 Web 頁面的<I>結構</I>。您的標記不可更改，用戶就不能亂弄；他們的瀏覽器只能從您的 Web
服務器檢索標記并顯示它（雖然樣式更符合用戶的品味而不是您自己的品味）。但頁面組織，不管是在該段落內還是在其他分區，都只由您單獨決定。要是想實際更改您的頁面（這是大多數
Ajax
應用程序所關注的），您操作的是頁面的結構。盡管很容易更改一段文本的顏色，但在現有頁面上添加文本或整個區段要難得多。不管用戶如何設計該區段的樣式，都是由您控制頁面本身的組織。</P>
<P><A name=N100B9><SPAN class=smalltitle>標記做什么</SPAN></A></P>
<P>一旦意識到您的標記是真正與組織相關的，您就會對它另眼相看了。不會認為 <CODE>h1</CODE>
導致文本是大字號、黑色、粗體的，而會認為 <CODE>h1</CODE> 是標題。用戶如何看待這個問題以及他們是使用您的
CSS、他們自己的 CSS
還是這兩者的組合，這是次要的考慮事項。相反，要意識到只有標記才能提供這種級別的組織；<CODE>p</CODE>
指明文本在段落內，<CODE>img</CODE> 表示圖像，<CODE>div</CODE> 將頁面分成區段，等等。</P>
<P>還應該清楚，樣式和行為（事件處理程序和 JavaScript）是在<I>事后</I>
應用于該組織的。標記就緒以后才能對其進行操作或設計樣式。所以，正如您可以將 CSS 保存在 HTML
的外部文件中一樣，標記的組織與其樣式、格式和行為是分離的。雖然您肯定可以用 JavaScript
更改元素或文本的樣式，但實際更改您的標記所布置的組織卻更加有趣。</P>
<P>只要牢記您的標記只為您的頁面提供組織、框架，您就能立于不敗之地。再前進一小步，您就會明白瀏覽器是如何接受所有的文本組織并將其轉變為超級有趣的一些東西的，即一組對象，其中每個對象都可被更改、添加或刪除。</P>
<TABLE cellSpacing=0 cellPadding=0 width="40%" align=right
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -