本 系列的上一篇文章中考察了文档对象模型(DOM)编程中涉及到的概念——Web 浏览器如何把网页看作一棵树,现在您应该理解了 DOM 中使用的编程结构。本期教程将把这些知识用于实践,建立一个简单的包含一些特殊效果的 Web 页面,所有这些都使用 JavaScript 操纵 DOM 来创建,不需要重新加载或者刷新页面。
前面两期文章已经详细介绍了文档对象模型或者 DOM,读者应该很清楚 DOM 是如何工作的了。(前两期 DOM 文章以及 Ajax 系列更早文章的链接请参阅参考资料。)本教程中将把这些知识用于实践。我们将开发一个简单的 Web 应用程序,其用户界面可根据用户动作改变,当然要使用 DOM 来处理界面的改变。阅读完本文之后,就已经把学习到的关于 DOM 的技术和概念付诸应用了。
假设读者已经阅读过上两期文章,如果还没有的话,请先看一看,切实掌握什么是 DOM 以及 Web 浏览器如何将提供给它的 HTML 和 CSS 转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有 DOM 原理都将在本教程中用于创建一个能工作的(虽然有点简单)基于 DOM 的动态 Web 页面。如果遇到不懂的地方,可以随时停下来复习一下前面的两期文章然后再回来。
<html> <head> <title>Magic Hat</title> <script language="JavaScript"> function showRabbit() { var hatImage = document.getElementById("topHat"); hatImage.setAttribute("src", "rabbit-hat.gif"); } </script> </head>
<body> <h1 align="center">Welcome to the DOM Magic Shop!</h1> <form name="magic-hat"> <p align="center"> <img src="topHat.gif" id="topHat" /> <br /><br /> <input type="button" value="Hocus Pocus!" id="hocusPocus" onClick="showRabbit();" /> </p> </form> </body> </html>
现在用 JavaScript 访问按钮很简单了:
function showRabbit() { var hatImage = document.getElementById("topHat"); hatImage.setAttribute("src", "rabbit-hat.gif"); var button = document.getElementById("hocusPocus"); }
function showRabbit() { var hatImage = document.getElementById("topHat"); hatImage.setAttribute("src", "rabbit-hat.gif"); var button = document.getElementById("hocusPocus"); button.setAttribute("value", "Get back in that hat!"); }
通过这个简单的 DOM 操作,兔子跳出来之后按钮的标签马上就会改变。现在,HTML 和完成的 showRabbit() 函数如清单 9 所示。
<html> <head> <title>Magic Hat</title> <script language="JavaScript"> function showRabbit() { var hatImage = document.getElementById("topHat"); hatImage.setAttribute("src", "rabbit-hat.gif"); button.setAttribute("value", "Get back in that hat!"); } </script> </head>
<body> <h1 align="center">Welcome to the DOM Magic Shop!</h1> <form name="magic-hat"> <p align="center"> <img src="topHat.gif" id="topHat" /> <br /><br /> <input type="button" value="Hocus Pocus!" id="hocusPocus" onClick="showRabbit();" /> </p> </form> </body> </html>
现在这个示例应用程序有一个大问题:虽然按钮的标签 改变了,但是单击按钮时的动作没有 变。幸运的是,当用户单击按钮时可以使用 DOM 改变事件或者发生的动作。因此,如果按钮上显示 Get back in that hat!,点击的时候需要运行 hideRabbit()。相反,一旦兔子藏了起来,按钮又返回来运行 showRabbit()。
除了 onclick 属性外,还有一个方法可用于添加 onClick 或 onBlur 这样的事件处理程序,毫不奇怪这个方法就叫 addEventHandler()。 不幸的是,Microsoft™ Internet Explorer™ 不支持这个方法,如果在 JavaScript 中使用它,就会有数百万 Internet Explorer 用户除了错误外从网页中什么也看不到(可能还有抱怨)。不使用这个方法,应用本文中介绍的办法也能达到同样的效果,而且在 Internet Explorer 上也有效。
查看 HTML 就会发现这里处理的事件是 onClick。在 JavaScript 中,可以通过按钮的 onclick 的属性来引用该事件。(要注意,在 HTML 中该属性通常称为 onClick,其中 C 大写;而在 JavaScript 中则称为 onclick,全部小写。)因此可以改变按钮触发的事件:只要赋给 onclick 属性一个新的函数。
<html> <head> <title>Magic Hat</title> <script language="JavaScript"> function showRabbit() { var hatImage = document.getElementById("topHat"); hatImage.setAttribute("src", "rabbit-hat.gif"); var button = document.getElementById("hocusPocus"); button.setAttribute("value", "Get back in that hat!"); button.onclick = hideRabbit; }
function hideRabbit() { var hatImage = document.getElementById("topHat"); hatImage.setAttribute("src", "topHat.gif"); var button = document.getElementById("hocusPocus"); button.setAttribute("value", "Hocus Pocus!"); button.onclick = showRabbit; } </script> </head>
<body> <h1 align="center">Welcome to the DOM Magic Shop!</h1> <form name="magic-hat"> <p align="center"> <img src="topHat.gif" id="topHat" /> <br /><br /> <input type="button" value="Hocus Pocus!" id="hocusPocus" onClick="showRabbit();" /> </p> </form> </body> </html>
现在您应该非常熟悉 DOM 了。前面的文章介绍了使用 DOM 所涉及到的基本概念,详细地讨论了 API,现在又建立一个简单的基于 DOM 的应用程序。一定要花点时间仔细阅读本文,并自己尝试一下。
虽然这是专门讨论文档对象模型的系列文章的最后一期,但肯定还会看到其他关于 DOM 的文章。事实上,如果在 Ajax 和 JavaScript 世界中不使用 DOM 就很难做多少事,至少在一定程度上如此。无论要创建复杂的突出显示还是移动效果,或者仅仅处理文本块或图片,DOM 都提供了一种非常简单易用的访问 Web 页面的方式。
如果对如何使用 DOM 仍然感觉没有把握,花点时间温习一下这三篇文章;本系列的其他文章在使用 DOM 的时候不再多作解释,读者也不希望迷失在这些细节之中而忽略关于其他概念的重要信息,比如 XML 和 JSON。为了保证能够熟练地使用 DOM,自己编写几个基于 DOM 的应用程序试试,这样就很容易理解后面将要讨论的一些数据格式问题了。