预览加载中，请您耐心等待几秒...

建立基于DOM的Web应用程序.pdf

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共16页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

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