第六章[1].建立基于_dom_的_web_应用程序

《第六章[1].建立基于_dom_的_web_应用程序》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、本系列的上一篇文章中考察了文档对象模型（DOM）编程中涉及到的概念——Web浏览器如何把网页看作一棵树，现在您应该理解了DOM中使用的编程结构。本期教程将把这些知识用于实践，建立一个简单的包含一些特殊效果的Web页面，所有这些都使用JavaScript操纵DOM来创建，不需要重新加载或者刷新页面。前面两期文章已经详细介绍了文档对象模型或者DOM，读者应该很清楚DOM是如何工作的了。（前两期DOM文章以及Ajax系列更早文章的链接请参阅参考资料。）本教程中将把这些知识用于实践。我们将开发一个简单的Web应用程序，其用户界面

2、可根据用户动作改变，当然要使用DOM来处理界面的改变。阅读完本文之后，就已经把学习到的关于DOM的技术和概念付诸应用了。假设读者已经阅读过上两期文章，如果还没有的话，请先看一看，切实掌握什么是DOM以及Web浏览器如何将提供给它的HTML和CSS转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有DOM原理都将在本教程中用于创建一个能工作的（虽然有点简单）基于DOM的动态Web页面。如果遇到不懂的地方，可以随时停下来复习一下前面的两期文章然后再回来。从一个示例应用程序开始关于代码的说明为了把注意力集中到DOM和Ja

3、vaScript代码上，我编写HTML的时候有些随意地采用内联样式（比如h1和p元素的align属性）。虽然对实验来说这样做是可接受的，但是对于开发的任何产品应用程序，我建议花点时间把所有的样式都放到外部CSS样式表中。我们首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。要记住，DOM可以移动网页中的任何东西而不需要提交表单，因此足以和Ajax媲美；我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为HocusPocus!的按钮（猜猜这是干什么的？）初始HTML清单1显示了这个网页的HTML。

4、除了标题和表单外，只有一个简单的图片和可以点击的按钮。清单1.示例应用程序的HTMLWelcometotheDOMMagicShop!

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

6、有任何动作的无限循环。（应该自己试试，看看会发生什么。）通过使用一般输入按钮而不是提交按钮，可以把javaScript函数和它连接起来与浏览器交互而无需提交表单。回页首向示例应用程序添加元素现在用一些JavaScript、DOM操作和小小的图片戏法装扮一下网页。使用getElementById()函数显然，魔法帽子没有兔子就没有看头了。这里首先用兔子的图片替换页面中原有的图片（再看看图1），如图2所示。图2.同样的礼帽，这一次有了兔子完成这个DOM小戏法的第一步是找到网页中表示img元素的DOM节点。一般来说，最简单的办

7、法是用getElementById()方法，它属于代表Web页面的document对象。前面已经见到过这个方法，用法如下：varelementNode=document.getElementById("id-of-element");为HTML添加id属性这是非常简单的JavaScript，但是需要修改一下HTML：为需要访问的元素增加id属性。也就是希望（用带兔子的新图片）替换的img元素，因此将HTML改为清单2的形式。清单2.增加id属性

8、ad>WelcometotheDOMMagicShop!