掌握Ajax，第6部分: 建立基于DOM的Web应用程序

掌握Ajax，第6部分: 建立基于DOM的Web应用程序2011-09-27 IBM Brett McLaughlin在不刷新页面的情况下使用 DOM 改变网页界面

简介：本系列的上一篇文章中考察了文档对象模型（DOM）编程中涉及到的概念——Web 浏览器如何把网页看作一棵树，现在您应该理解了 DOM 中使用的编程结构。本期教程将把这些知识用于实践，建立一个简单的包含一些特殊效果的 Web 页面，所有这些都使用 JavaScript 操纵 DOM 来创建，不需要重新加载或者刷新页面。

前面两期文章已经详细介绍了文档对象模型或者 DOM，读者应该很清楚 DOM 是如何工作的了。（前两期 DOM 文章以及 Ajax 系列更早文章的链接请参阅参考资料。）本教程中将把这些知识用于实践。我们将开发一个简单的 Web 应用程序，其用户界面可根据用户动作改变，当然要使用 DOM 来处理界面的改变。阅读完本文之后，就已经把学习到的关于 DOM 的技术和概念付诸应用了。

假设读者已经阅读过上两期文章，如果还没有的话，请先看一看，切实掌握什么是 DOM 以及 Web 浏览器如何将提供给它的 HTML 和 CSS 转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有 DOM 原理都将在本教程中用于创建一个能工作的（虽然有点简单）基于 DOM 的动态 Web 页面。如果遇到不懂的地方，可以随时停下来复习一下前面的两期文章然后再回来。

从一个示例应用程序开始

我们首先建立一个非常简单的应用程序，然后再添加一点 DOM 魔法。要记住，DOM 可以移动网页中的任何东西而不需要提交表单，因此足以和 Ajax 媲美；我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 Hocus Pocus！的按钮（猜猜这是干什么的？）

初始 HTML

清单 1 显示了这个网页的 HTML。除了标题和表单外，只有一个简单的图片和可以点击的按钮。

清单 1. 示例应用程序的 HTML

<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>

可以在本文后面的下载中找到这段 HTML 和本文中用到的图片。不过我强烈建议您只下载那个图片，然后随着本文中逐渐建立这个应用程序自己动手输入代码。这样要比读读本文然后直接打开完成的应用程序能够更好地理解 DOM 代码。