建立基于 DOM 的 Web 应用程序

参考资料

。

）

本教程中将把这些知识用于实践。

我们

将开发一个简单的

 Web 

应用程序，

其用户界面可根据用户动作改变，

当然要使用

 DOM 

来处理界面的改

变。阅读完本文之后，就已经把学习到的关于

 DOM 

的技术和概念付诸应用了。

假设读者已经阅读过上两期文章，

如果还没有的话，

请先看一看，

切实掌握什么是

 DOM 

以及

 Web 

浏览

器如何将提供给它的

 HTML 

和

 CSS 

转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有

DOM 

原理都将在本教程中用于创建一个能工作的

（虽然有点简单）

基于

 DOM 

的动态

 Web 

页面。

如果

遇到不懂的地方，可以随时停下来复习一下前面的两期文章然后再回来。

从一个示例应用程序开始

我们首先建立一个非常简单的应用程序，然后再添加一点

DOM 

魔法。要记住，

DOM 

可以移动网页中的任何东西

而不需要提交表单，因此足以和

 Ajax 

媲美；我们创建一

个简单的网页，上面只显示一个普通的旧式大礼帽，还有

一个标记为

Hocus Pocus!

的按钮（猜猜这是干什么

的？）

初始

 HTML

清单