📄 掌握 ajax，第 6 部分 建立基于 dom 的 web 应用程序.htm
字号:
<TD class=small width=122>
<P><SPAN class=ast>未显示需要 JavaScript
的文档选项</SPAN></P></TD></TR></NOSCRIPT></FORM>
<TR vAlign=top>
<TD width=8><IMG height=1 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif"
width=8></TD>
<TD width=16><IMG height=16 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/dn.gif"
width=16 vspace=3 border=0></TD>
<TD width=122>
<P><A class=smallplainlink
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#download"><B>样例代码</B></A></P></TD></TR></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，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif"
width=8></TD>
<TD><IMG height=16 alt=""
src="掌握 Ajax，第 6 部分 建立基于 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-ajaxintro6/#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 年 10 月 12 日</P>
<BLOCKQUOTE>本系列的上一篇文章中考察了文档对象模型（DOM）编程中涉及到的概念——Web
浏览器如何把网页看作一棵树，现在您应该理解了 DOM
中使用的编程结构。本期教程将把这些知识用于实践，建立一个简单的包含一些特殊效果的 Web 页面，所有这些都使用 JavaScript
操纵 DOM 来创建，不需要重新加载或者刷新页面。</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>前面两期文章已经详细介绍了文档对象模型或者 DOM，读者应该很清楚 DOM 是如何工作的了。（前两期 DOM 文章以及 Ajax
系列更早文章的链接请参阅<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#resources">参考资料</A>。）本教程中将把这些知识用于实践。我们将开发一个简单的
Web 应用程序，其用户界面可根据用户动作改变，当然要使用 DOM 来处理界面的改变。阅读完本文之后，就已经把学习到的关于 DOM
的技术和概念付诸应用了。</P>
<P>假设读者已经阅读过上两期文章，如果还没有的话，请先看一看，切实掌握什么是 DOM 以及 Web 浏览器如何将提供给它的 HTML
和 CSS 转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有 DOM
原理都将在本教程中用于创建一个能工作的（虽然有点简单）基于 DOM 的动态 Web
页面。如果遇到不懂的地方，可以随时停下来复习一下前面的两期文章然后再回来。</P>
<P><A name=1><SPAN class=atitle>从一个示例应用程序开始</SPAN></A></P>
<TABLE cellSpacing=0 cellPadding=0 width="45%" align=right
border=0><TBODY>
<TR>
<TD width=10><IMG height=1 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif"
width=10></TD>
<TD>
<TABLE cellSpacing=0 cellPadding=5 width="100%" border=1>
<TBODY>
<TR>
<TD bgColor=#eeeeee><A
name=sidebar1><B>关于代码的说明</B></A><BR>
<P>为了把注意力集中到 DOM 和 JavaScript 代码上，我编写 HTML
的时候有些随意地采用内联样式（比如 <CODE>h1</CODE> 和 <CODE>p</CODE> 元素的
<CODE>align</CODE>
属性）。虽然对实验来说这样做是可接受的，但是对于开发的任何产品应用程序，我建议花点时间把所有的样式都放到外部
CSS 样式表中。</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P>我们首先建立一个非常简单的应用程序，然后再添加一点 DOM 魔法。要记住，DOM
可以移动网页中的任何东西而不需要提交表单，因此足以和 Ajax
媲美；我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 <B>Hocus Pocus!</B>
的按钮（猜猜这是干什么的？）</P>
<P><A name=1.1><SPAN class=smalltitle>初始 HTML</SPAN></A></P>
<P><A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#listing1">清单
1</A> 显示了这个网页的 HTML。除了标题和表单外，只有一个简单的图片和可以点击的按钮。</P><BR><A
name=listing1><B>清单 1. 示例应用程序的 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>Magic Hat</title>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>可以在本文后面的<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#download">下载</A>中找到这段
HTML
和本文中用到的图片。不过我强烈建议您只下载那个图片，然后随着本文中逐渐建立这个应用程序自己动手输入代码。这样要比读读本文然后直接打开完成的应用程序能够更好地理解
DOM 代码。</P>
<P><A name=1.2><SPAN class=smalltitle>查看示例网页</SPAN></A></P>
<P>这里没有什么特别的窍门，打开网页可以看到<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#fig1">图
1</A> 所示的结果。</P><BR><A name=fig1><B>图 1. 难看的大礼帽</B></A><BR><IMG
height=381 alt=难看的大礼帽
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/initial.jpg"
width=481> <BR>
<P><A name=1.3><SPAN class=smalltitle>关于 HTML 的补充说明</SPAN></A></P>
<P><I>应该</I> 注意的重要一点是，<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#listing1">清单
1</A> 和<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#fig1">图
1</A> 中按钮的类型是 <CODE>button</CODE>
而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单，当然表单没有 <CODE>action</CODE>
属性（完全是有意如此），从而会造成没有任何动作的无限循环。（应该自己试试，看看会发生什么。）通过使用一般输入按钮而不是提交按钮，可以把
javaScript 函数和它连接起来与浏览器交互而<I>无需</I> 提交表单。</P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif"
width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/u_bold.gif"
width=16 border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=2><SPAN class=atitle>向示例应用程序添加元素</SPAN></A></P>
<P>现在用一些 JavaScript、DOM 操作和小小的图片戏法装扮一下网页。</P>
<P><A name=2.1><SPAN class=smalltitle>使用 getElementById()
函数</SPAN></A></P>
<P>显然，魔法帽子没有兔子就没有看头了。这里首先用兔子的图片替换页面中原有的图片（再看看<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#fig1">图
1</A>），如<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#fig2">图
2</A> 所示。 </P><BR><A name=fig2><B>图 2. 同样的礼帽，这一次有了兔子</B></A><BR><IMG
height=450 alt=同样的礼帽，这一次有了兔子
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/rabbit-hat.gif"
width=300> <BR>
<P>完成这个 DOM 小戏法的第一步是找到网页中表示 <CODE>img</CODE> 元素的 DOM
节点。一般来说，最简单的办法是用 <CODE>getElementById()</CODE> 方法，它属于代表 Web 页面的
<CODE>document</CODE> 对象。前面已经见到过这个方法，用法如下：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>var elementNode = document.getElementById("id-of-element");
</PRE></TD></TR></TBODY></TABLE><BR>
<P><A name=2.2><SPAN class=smalltitle>为 HTML 添加 id 属性</SPAN></A></P>
<P>这是非常简单的 JavaScript，但是需要修改一下 HTML：为需要访问的元素增加 <CODE>id</CODE>
属性。也就是希望（用带兔子的新图片）替换的 <CODE>img</CODE> 元素，因此将 HTML 改为<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#listing2">清单
2</A> 的形式。</P><BR><A name=listing2><B>清单 2. 增加 id 属性</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<title>Magic Hat</title>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" <SPAN class=boldcode>id="topHat"</SPAN> />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>如果重新加载（或者打开）该页面，可以看到毫无变化，增加 <CODE>id</CODE>
属性对网页的外观没有影响。不过，该属性可以帮助 JavaScript 和 DOM 更方便地处理元素。</P>
<P><A name=2.3><SPAN class=smalltitle>抓住 img 元素</SPAN></A></P>
<P>现在可以很容易地使用 <CODE>getElementById()</CODE> 了。已经有了需要元素的 ID，即
<CODE>topHat</CODE>，可以将其保存在一个新的 JavaScript 变量中。在 HTML 页面中增加<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#listing3">清单
3</A> 所示的代码。</P><BR><A name=listing3><B>清单 3. 访问 img 元素</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -