掌握 Ajax5.docVIP

掌握 Ajax，第 6 部分: 建立基于 DOM 的 Web 应用程序 在不刷新页面的情况下使用 DOM 改变网页界面 2006 年 10 月 12 日 本系列的上一篇文章中考察了文档对象模型（DOM）编程中涉及到的概念——Web 浏览器如何把网页看作一棵树，现在您应该理解了 DOM 中使用的编程结构。本期教程将把这些知识用于实践，建立一个简单的包含一些特殊效果的 Web 页面，所有这些都使用 JavaScript 操纵 DOM 来创建，不需要重新加载或者刷新页面。 前面两期文章已经详细介绍了文档对象模型或者 DOM，读者应该很清楚 DOM 是如何工作的了。（前两期 DOM 文章以及 Ajax 系列更早文章的链接请参阅参考资料。）本教程中将把这些知识用于实践。我们将开发一个简单的 Web 应用程序，其用户界面可根据用户动作改变，当然要使用 DOM 来处理界面的改变。阅读完本文之后，就已经把学习到的关于 DOM 的技术和概念付诸应用了。 假设读者已经阅读过上两期文章，如果还没有的话，请先看一看，切实掌握什么是 DOM 以及 Web 浏览器如何将提供给它的 HTML 和 CSS 转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有 DOM 原理都将在本教程中用于创建一个能工作的（虽然有点简单）基于 DOM 的动态 Web 页面。如果遇到不懂的地方，可以随时停下来复习一下前面的两期文章然后再回来。 从一个示例应用程序开始 关于代码的说明 为了把注意力集中到 DOM 和 JavaScript 代码上，我编写 HTML 的时候有些随意地采用内联样式（比如 h1 和 p 元素的 align 属性）。虽然对实验来说这样做是可接受的，但是对于开发的任何产品应用程序，我建议花点时间把所有的样式都放到外部 CSS 样式表中。 我们首先建立一个非常简单的应用程序，然后再添加一点 DOM 魔法。要记住，DOM 可以移动网页中的任何东西而不需要提交表单，因此足以和 Ajax 媲美；我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按钮（猜猜这是干什么的？） 初始 HTML 清单 1 显示了这个网页的 HTML。除了标题和表单外，只有一个简单的图片和可以点击的按钮。 清单 1. 示例应用程序的 HTML html head titleMagic Hat/title /head body h1 align=centerWelcome 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 可以在本文后面的下载中找到这段 HTML 和本文中用到的图片。不过我强烈建议您只下载那个图片，然后随着本文中逐渐建立这个应用程序自己动手输入代码。这样要比读读本文然后直接打开完成的应用程序能够更好地理解 DOM 代码。 查看示例网页 这里没有什么特别的窍门，打开网页可以看到图 1 所示的结果。 图 1. 难看的大礼帽 关于 HTML 的补充说明 应该 注意的重要一点是，清单 1 和图 1 中按钮的类型是 button 而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单，当然表单没有 action 属性（完全是有意如此），从而会造成没有任何动作的无限循环。（应该自己试试，看看会发生什么。）通过使用一般输入按钮而不是提交按钮，可以把 javaScript 函数和它连接起来与浏览器交互而无需 提交表单。 向示例应用程序添加元素 现在用一些 JavaScript、DOM 操作和小小的图片戏法装扮一下网页。 使用 getElementById() 函数 显然，魔法帽子没有兔子就没有看头了。这里首先用兔子的图片替换页面中原有的图片（再看看图 1），如图 2 所示。 图 2. 同样的礼帽，这一次有了兔子 完成这个 DOM 小戏法的第一步是找到网页中表示 img 元素的 DOM 节点。一般来说，最简单的办法是用 getElementById() 方法，它属于代表 Web 页面的 document 对象。前面已经见到过这个方法，用法如下： var elementNode = document.getElementById(id-of-element); 为 H