📄 掌握 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 + -