第6部分建立基于DOM的Web应用程序

《第6部分建立基于DOM的Web应用程序》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、前面两期文章已经详细介绍了文档对象模型或者DOM,读者应该很清楚DOM是如何工作的了。（前两期DOM文章以及Ajax系列更早文章的链接请参阅参考资料。）本教程中将把这些知识用于实践。我们将开发一个简单的Web应用程序，英用户界面可根据用户动作改变，当然要使用DOM來处理界面的改变。阅读完本文之后，就己经把学习到的关于DOM的技术和概念付诸应用了。假设读者已经阅读过上两期文章，如果还没有的话，请先看一看，切实掌握什么是DOM以及Web浏览器如何将提供给它的HTML和CSS转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有DOM原理都将在本教程中用于创建一个能工作的（虽然有点简单）基于

2、DOM的动态Web页面。如果遇到不懂的地方，可以随时停下來复习一下前面的两期文章然后再回来。从一个示例应用程序开始关于代码的说明为了把注意力集中到DOM和JavaScript代码上，我编写HTML的时候有些随意地采用内联样式（比如hl和p元素的aligns性）。虽然对实验來说这样做是可接受的，但是对于开发的任何产胡应用程序，我建议花点吋间把所有的样式都放到外部css样式表中。我们首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。要记住，DOM可以移动网页中的任何东西而不需要提交表单，因此足以和Ajax媲美；我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为Hoc

3、usPocus!的按钮（猜猜这是干什么的？）初始HTML清单1显示了这个网页的HTML。除了标题和表单外，只有一个简单的图片和可以点击的按钮。清单1.示例应用程序的HTML

4、fortn>可以在木文后面的垃中找到这段HTML和木文屮用到的图片。不过我强烈建议您只下载那个图片，然后随着本文中逐渐建立这个应用程序自己动手输入代码。这样要比读读本文然后直接打开完成的应用程序能够更好地理解DOM代码。查看示例网页这里没有什么特别的窍门，打开网页可以看到图1所示的结果。图1.难看的大礼帽关于HTML的补充说明血该注意的重要一点是，清单1和图1屮按钮的类型是button而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单，当然表单没有action属性（完全是有意如此），从而会造成没有任何动作的无限循环。（应该白己试试，看看会发生什么。

5、）通过使用一般输入按钮而不是提交按钮，可以把JavaScript函数和它连接起来与浏览器交互而无需提交表单。回页首向示例应用程序添加元素现在用一些JavaScript、DOM操作和小小的图片戏法装扮一下网页。使用getElementByld（）函数显然，魔法帽子没有兔子就没有看头了。这里首先用兔子的图片替换页面屮原有的图片（再看看图1）,如图2所示。图2.同样的礼帽，这一次有了兔子完成这个DOM小戏法的第一步是找到网页屮表示img元素的DOM节点。一般来说,最简单的办法是用getElementByldO方法，它属于代表Web页面的document对象。前面己经见到过这个方法，用法如下：va

6、relementNode=document-getEIementById(**id-of-eIement**);为HTML添加id属性这是非常简单的JavaScript,但是需要修改一下HTML：为需要访问的元素增加id属性。也就是希望(用带兔子的新图片)替换的img元素，因此将HTML改为清单2的形式。清单2.增加id属性