建立基于DOM的Web应用程序

　　本系列的上一篇文章中考察了文档对象模型（DOM）编程中涉及到的概念——Web浏览器如何把网页看作一棵树，现在您应该理解了DOM中使用的编程结构。本期教程将把这些知识用于实践，建立一个简单的包含一些特殊效果的Web页面，所有这些都使用JavaScript操纵DOM来创建，不需要重新加载或者刷新页面。

　　前面两期文章已经详细介绍了文档对象模型或者DOM，读者应该很清楚DOM是如何工作的了。（前两期DOM文章以及Ajax系列更早文章的链接请参阅参考资料。）本教程中将把这些知识用于实践。我们将开发一个简单的Web应用程序，其用户界面可根据用户动作改变，当然要使用DOM来处理界面的改变。阅读完本文之后，就已经把学习到的关于DOM的技术和概念付诸应用了。

　　假设读者已经阅读过上两期文章，如果还没有的话，请先看一看，切实掌握什么是DOM以及Web浏览器如何将提供给它的HTML和CSS转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有DOM原理都将在本教程中用于创建一个能工作的（虽然有点简单）基于DOM的动态Web页面。如果遇到不懂的地方，可以随时停下来复习一下前面的两期文章然后再回来。

　　从一个示例应用程序开始

　　我们首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。要记住，DOM可以移动网页中的任何东西而不需要提交表单，因此足以和Ajax媲美；我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为Hocus Pocus!的按钮

　　初始HTML
　
　　清单1显示了这个网页的HTML。除了标题和表单外，只有一个简单的图片和可以点击的按钮。

　　清单1. 示例应用程序的HTML

　　<html>
　　 <head>
　　 <title>Magic Hat</title>
　　 </head>

　　 <body>
　　 <h1 align=”center”>Welcome to the DOM Magic Shop!</h1>
　　 <form name=”magic-hat”>
　　   <p align=”center”>
　　    <img src=”topHat.gif” />
　　    <br /><br />
　　    <input type=”button” value=”Hocus Pocus!” />
　　   </p>
　　 </form>
　　 </body>
　　</html>

　　可以在本文后面的下载中找到这段HTML和本文中用到的图片。不过我强烈建议您只下载那个图片，然后随着本文中逐渐建立这个应用程序自己动手输入代码。这样要比读读本文然后直接打开完成的应用程序能够更好地理解DOM代码。

　　查看示例网页

　　这里没有什么特别的窍门，打开网页可以看到图1所示的结果。

　　图1. 难看的大礼帽

　　关于HTML的补充说明

　　应该注意的重要一点是，清单1和图1中按钮的类型是button而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单，当然表单没有action属性（完全是有意如此），从而会造成没有任何动作的无限循环。（应该自己试试，看看会发生什么。）通过使用一般输入按钮而不是提交按钮，可以把javaScript函数和它连接起来与浏览器交互而无需提交表单。

　　向示例应用程序添加元素

　　现在用一些JavaScript、DOM操作和小小的图片戏法装扮一下网页。

　　使用getElementById()函数

　　显然，魔法帽子没有兔子就没有看头了。这里首先用兔子的图片替换页面中原有的图片（再看看图1），如图2所示。

　　图2. 同样的礼帽，这一次有了兔子

　　完成这个DOM小戏法的第一步是找到网页中表示img元素的DOM节点。一般来说，最简单的办法是用getElementById()方法，它属于代表Web页面的document对象。前面已经见到过这个方法，用法如下：

　　var elementNode=document.getElementById(“id-of-element”);

　　为HTML添加id属性

　　这是非常简单的JavaScript，但是需要修改一下HTML：为需要访问的元素增加id属性。也就是希望（用带兔子的新图片）替换的img元素，因此将HTML改为清单2的形式。

　　清单2. 增加id属性

　　<html>
　　 <head>
　　 <title>Magic Hat</title>
　　 </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!” />
　　   </p>
　　 </form>
　　 </body>
　　</html>

　　如果重新加载（或者打开）该页面，可以看到毫无变化，增加id属性对网页的外观没有影响。不过，该属性可以帮助JavaScript和DOM更方便地处理元素。

　　抓住img元素

　　现在可以很容易地使用getElementById()了。已经有了需要元素的ID，即topHat，可以将其保存在一个新的JavaScript变量中。在HTML页面中增加清单3所示的代码。

　　清单3. 访问img元素

　　<html>
　　 <head>
　　 <title>Magic Hat</title>
　　 <script language=”JavaScript”>
　　    function showRabbit() {
　　      var hatImage = document.getElementById(“topHat”);
　　    }
　　 </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!” />
　　   </p>
　　 </form>
　　 </body>
　　</html>

　　现在打开或重新加载该网页同样没有什么惊奇的地方。虽然现在能够访问图片，但是对它还什么也没有做。

　　修改图片，麻烦的办法

　　完成所需修改有两种方法：一种简单，一种麻烦。和所有的好程序员一样，我也喜欢简单的办法；但是运用较麻烦的办法是一次很好的DOM练习，值得您花点时间。首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法。

　　用带兔子的新照片替换原有图片的办法如下：

　　·创建新的img元素。
　　·访问当前img元素的父元素，也就是它的容器。
　　·在已有img元素之前插入新的img元素作为该容器的子级。
　　·删除原来的img元素。
　　·结合起来以便在用户单击Hocus Pocus! 按钮时调用刚刚创建的JavaScript函数。

　　创建新的img元素

　　通过上两期文章应该记住DOM中最关键的是document对象。它代表整个网页，提供了getElementById()这样功能强大的方法，还能够创建新的节点。现在要用到的就是这最后一种性质。

　　具体而言，需要创建一个新的img元素。要记住，在DOM中一切都是节点，但是节点被进一步划分为三种基本类型：
　　
　　·元素
　　·属性
　　·文本节点

　　还有其他类型，但是这三种可以满足99%的编程需要。这里需要一个img类型的新元素。因此需要下列JavaScript代码：

　　var newImage=document.createElement(“img”);

　　这行代码可以创建一个element类型的新节点，元素名为img。在HTML中基本上就是：

　　<img/>

　　要记住，DOM会创建结构良好的HTML，就是说这个目前为空的元素包括起始和结束标签。剩下的就是向该元素增加内容或属性，然后将其插入到网页中。

　　对内容来说，img是一个空元素。但是需要增加一个属性src，它指定了要加载的图片。您也许认为要使用addAttribute()之类的方法，但情况并非如此。DOM规范的制定者认为程序员可能喜欢简洁，因此他们规定了一个方法同时用于增加新属性和改变已有的属性值：setAttribute()。

　　如果对已有的属性调用setAttribute()，则把原来的值替换为指定的值。但是，如果调用setAttribute()并指定一个不存在的属性，DOM就会使用提供的值增加一个属性。一个方法，两种用途！因此需要增加下列JavaScript代码：

　　var newImage = document.createElement(“img”);
　　newImage.setAttribute(“src”, “rabbit-hat.gif”);

　　它创建一个图片元素然后设置适当的资源属性。现在，HTML应该如清单4所示。
　
　　清单4. 使用DOM创建新图片

　　<html>
　　 <head>
　　 <title>Magic Hat</title>
　　 <script language=”JavaScript”>
　　    function showRabbit() {
　　      var hatImage = document.getElementById(“topHat”);
　　      var newImage = document.createElement(“img”);
　　      newImage.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!” />
　　   </p>
　　 </form>
　　 </body>
　　</html>

　　可以加载该页面，但是不要期望有任何改变，因为目前所做的修改实际上还没有影响页面。另外，如果再看看任务列表中的第5步，就会发现还没有调用我们的JavaScript函数！

　　获得原始图片的父元素

　　现在有了要插入的图片，还需要找到插入的地方。但是不能将其插入到已有的图片中，而是要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素，实际上这就是插入和删除操作的真正关键所在。

　　应该记得，前面的文章中曾经指出DOM确实把网页看成一棵树，即节点的层次结构。每个节点都有父节点（树中更高层次的节点，该节点是它的一个子级），可能还有自己的子节点。对于图片来说，它没有子级——要记住图片是空元素，但是它肯定有父节点。甚至不需要知道父节点是什么，但是需要访问它。

　　为此，只要使用每个DOM节点都有的parentNode属性即可，比如：
　
　　var imgParent=hatImage.parentNode;

　　确实非常简单！可以肯定这个节点有子节点，因为已经有了一个：原来的图片。此外，完全不需要知道它是一个div、p或者页面的body，都没有关系！

　　插入新图片
　
　　现在得到了原来图片的父节点，可以插入新的图片了。很简单，有多种方法可以添加子节点：

　　·insertBefore(newNode, oldNode)
　　·appendChild(newNode)

　　因为希望把新图片放在旧图片的位置上，需要使用insertBefore()（后面还要使用removeChild()方法）。可使用下面这行JavaScript代码把新图片元素插入到原有图片之前：

　　var imgParent = hatImage.parentNode;
　　imgParent.insertBefore(newImage, hatImage);

　　现在原图片的父元素有了两个子元素：新图片和紧跟在后面的旧图片。必须指出，这里包围这些图片的内容没有变，而且这些内容的顺序也和插入之前完全相同。仅仅是这个父节点中增加了一个子节点，即旧图片之前的新图片。

　　删除旧图片

　　现在只需要删除旧图片，因为网页中只需要新图片。很简单，因为已经得到了旧图片元素的父节点。只要调用removeChild()并把需要删除的节点传递给它即可：

　　var imgParent = hatImage.parentNode;
　　imgParent.insertBefore(newImage, hatImage);
　　imgParent.removeChild(hatImage);

　　现在，用新图片替换旧图片的工作已基本完成了。HTML应该如清单5所示。

　　清单5. 用新图片替换旧图片

　　最后一步，可能也是最简单的，就是把HTML表单连接到刚刚编写的JavaScript函数。需要每当用户点击Hocus Pocus! 按钮的时候运行showRabbit()函数。为此只要向HTML中增加一个简单的onClick事件处理程序即可。

　　<input type=”button” value=”Hocus Pocus!” onClick=”showRabbit();” />

　　这种简单的JavaScript编程应该非常容易了。将其添加到HTML页面中，保存它然后在Web浏览器中打开。页面初看起来应该和图1相同，但是点击Hocus Pocus!后应该看到图3所示的结果。

　　图3. 兔子戏法

　　替换图片，简单的办法

　　如果回顾替换图片的步骤，再看看节点的各种方法，可能会注意到方法replaceNode()。该方法可用于把一个节点替换为另一个节点。再考虑一下前面的步骤：

　　·创建新的img元素。
　　·访问当前img元素的父元素，也就是它的容器。
　　·在已有img元素之前插入新的img元素作为该容器的子元素。
　　·删除原来的img元素。
　　·连接起来以便在用户点击Hocus Pocus!的时候调用刚刚创建的JavaScript函数。

　　使用replaceNode()可以减少需要的步骤数。可以将第3步和第4步合并在一起：

　　·创建新的img元素。
　　·访问当前img元素的父元素，也就是它的容器。
　　·用创建的新元素替换旧的img元素。
　　·连接起来以便在用户点击Hocus Pocus!的时候调用刚刚创建的JavaScript函数。

　　这看起来不是什么大事，但确实能够简化代码。清单6说明了这种修改：去掉了insertBefore()和removeChild()方法调用。

　　清单6. 用新图片替换旧图片（一步完成）

　　 <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!” onClick=”showRabbit();” />
　　   </p>
　　 </form>
　　 </body>
　　</html>

　　当然这不是什么大的修改，但是说明了DOM编码中一件很重要的事：执行一项任务通常有多种方法。如果仔细审阅可用DOM方法看看是否有更简单的方法可以完成任务，很多时候都会发现可以将四五个步骤压缩为两三个步骤。

　　替换图片，（真正）简单的办法

　　既然指出了执行一项任务几乎总是有更简单的方法，现在就说明用兔子图片替换帽子图片的简单得多的办法。阅读本文的过程中有没有想到这种方法？提示一下：与属性有关。

　　要记住，图片元素很大程度上是由其 src属性控制的，他引用了某个地方的文件（不论是本地URI还是外部URL）。到目前为止，我们一直用新图片替换图片节点，但是直接修改已有图片的src属性要简单得多！这样就避免了创建新节点、寻找父节点和替换旧节点的所有工作，只要一步就能完成了：

　　hatImage.setAttribute(“src”, “rabbit-hat.gif”);

　　这样就够了！看看清单7，它显示了这种解决方案，包括整个网页。

　　清单7. 修改src属性

　　 <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!” onClick=”showRabbit();” />
　　   </p>
　　 </form>
　　 </body>
　　</html>

　　这是DOM最棒的一点：更新属性的时候网页马上就会改变。只要图片指向新的文件，浏览器就加载该文件，页面就更新了。不需要重新加载，甚至不需要创建新的图片元素！结果仍然和图3相同，只不过代码简单得多了。

　　把兔子藏起来

　　现在网页看起来很漂亮，但是仍然有点原始。虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示Hocus Pocus!和调用showRabbit()。这就是说如果在兔子出来之后仍然点击按钮，就是在浪费处理时间。更重要的是，它毫无用处，而没有用的按钮不是好东西。我们来看看能否利用DOM再作一些修改，无论兔子在帽子里还是出来都让这个按钮派上用场。

　　修改按钮的标签

　　最简单的是当用户点击按钮之后改变它的标签。这样就不会看起来像还有什么魔法，网页中最糟糕的就是暗示用户错误的东西。在修改按钮的标签之前需要访问该节点，而在此之前需要引用按钮ID。这是老套路了，清单8为按钮增加了id属性。
　
　　清单8. 增加id属性

　　function showRabbit() {
　　 var hatImage = document.getElementById(“topHat”);
　　 hatImage.setAttribute(“src”, “rabbit-hat.gif”);
　　 var button = document.getElementById(“hocusPocus”);
　　}

　　当然，您可能已经输入了下面这行JavaScript来改变按钮的标签值。这里再次用到了setAttribute()：

　　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所示。

　　清单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>

　　从此新的按钮标签中可能已经猜到，现在要把兔子收回帽子中去。基本上和放兔子出来完全相反：将图片的src属性再改回旧图片。创建一个新的JavaScript函数来完成这项任务：

　　function hideRabbit() {
　　 var hatImage = document.getElementById(“topHat”);
　　 hatImage.setAttribute(“src”, “topHat.gif”);
　　 var button = document.getElementById(“hocusPocus”);
　　 button.setAttribute(“value”, “Hocus Pocus!”);
　　}

　　实际上仅仅把showRabbit()函数的功能翻转了过来。将图片改为原来的没有兔子的大礼帽，抓取按钮，将标签改为Hocus Pocus!

　　事件处理程序

　　现在这个示例应用程序有一个大问题：虽然按钮的标签改变了，但是单击按钮时的动作没有变。幸运的是，当用户单击按钮时可以使用DOM改变事件或者发生的动作。因此，如果按钮上显示Get back in that hat!，点击的时候需要运行hideRabbit()。相反，一旦兔子藏了起来，按钮又返回来运行showRabbit()。

　　查看HTML就会发现这里处理的事件是onClick。在JavaScript中，可以通过按钮的onclick的属性来引用该事件。（要注意，在HTML中该属性通常称为onClick，其中C大写；而在JavaScript中则称为onclick，全部小写。）因此可以改变按钮触发的事件：只要赋给onclick属性一个新的函数。

　　但是有点细微的地方：onclick属性需要提供函数引用——不是函数的字符串名称，而是函数本身的引用。在JavaScript中，可以按名称引用函数，不需要带括号。因此可以这样修改点击按钮时执行的函数：

　　button.onclick=myFunction;

　　因此在HTML中作这种修改很简单。看看清单10，它切换按钮触发的函数。

　　清单10. 改变按钮的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了。前面的文章介绍了使用DOM所涉及到的基本概念，详细地讨论了API，现在又建立一个简单的基于DOM的应用程序。一定要花点时间仔细阅读本文，并自己尝试一下。

　　虽然这是专门讨论文档对象模型的系列文章的最后一期，但肯定还会看到其他关于DOM的文章。事实上，如果在Ajax和JavaScript世界中不使用DOM就很难做多少事，至少在一定程度上如此。无论要创建复杂的突出显示还是移动效果，或者仅仅处理文本块或图片，DOM都提供了一种非常简单易用的访问Web页面的方式。

　　如果对如何使用DOM仍然感觉没有把握，花点时间温习一下这三篇文章；本系列的其他文章在使用DOM的时候不再多作解释，读者也不希望迷失在这些细节之中而忽略关于其他概念的重要信息，比如XML和JSON。为了保证能够熟练地使用DOM，自己编写几个基于DOM的应用程序试试，这样就很容易理解后面将要讨论的一些数据格式问题了。

我们一直都在努力坚持原创.......请不要一声不吭，就悄悄拿走。

我原创，你原创，我们的内容世界才会更加精彩！

【所有原创内容版权均属TechTarget，欢迎大家转发分享。但未经授权，严禁任何媒体（平面媒体、网络媒体、自媒体等）以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget

官方微博

TechTarget中国

取消回复

要发表评论，您必须先登录。

作者

: Brett McLaughlin

建立基于DOM的Web应用程序

取消回复

作者

Brett McLaughlin

相关推荐

AWS MEAN堆栈+JavaScript=快速搭建应用

JDK 8u40更新：新增功能抢先看

移动浏览器到云：JavaScript地位正在扩张

移动HTML5挑战何在？