本文将把这些知识用于实践。我们将开发一个简单的 web 应用程序，其用户界面可根据用户动作改变，当然要使用 dom 来处理界面的改变。阅读完本文之后，就已经把学习到的关于 dom 的技术和概念付诸应用了。
本系列的相关文章中考察了文档对象模型(dom)编程中涉及到的概念――web 浏览器如何把网页看作一棵树，现在您应该理解了 dom 中使用的编程结构。本文将把这些知识用于实践，建立一个简单的包含一些特殊效果的 web 页面，所有这些都使用 javascript 操纵 dom 来创建，不需要重新加载或者刷新页面。
本文将把这些知识用于实践。我们将开发一个简单的 web 应用程序，其用户界面可根据用户动作改变，当然要使用 dom 来处理界面的改变。阅读完本文之后，就已经把学习到的关于 dom 的技术和概念付诸应用了。
假设读者已经阅读过上两篇文章，如果还没有的话，请先看一看，切实掌握什么是 dom 以及 web 浏览器如何将提供给它的 html 和 css 转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有 dom 原理都将在本教程中用于创建一个能工作的(虽然有点简单)基于 dom 的动态 web 页面。如果遇到不懂的地方，可以随时停下来复习一下前面的两篇文章然后再回来。（利用dom进行web响应 和 ajax 中的高级请求和响应）
从一个示例应用程序开始
我们首先建立一个非常简单的应用程序，然后再添加一点 dom 魔法。要记住，dom 可以移动网页中的任何东西而不需要提交表单，因此足以和 ajax 媲美;我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 hocus pocus! 的按钮(猜猜这是干什么的?)
初始 html
清单 1 显示了这个网页的 html。除了标题和表单外，只有一个简单的图片和可以点击的按钮。
清单 1. 示例应用程序的 html
|
<html> <body> |
查看示例网页
这里没有什么特别的窍门，打开网页可以看到图 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> <body> |
如果重新加载(或者打开)该页面，可以看到毫无变化，增加 id 属性对网页的外观没有影响。不过，该属性可以帮助 javascript 和 dom 更方便地处理元素。
抓住 img 元素
现在可以很容易地使用 getelementbyid() 了。已经有了需要元素的 id，即 tophat，可以将其保存在一个新的 javascript 变量中。在 html 页面中增加清单 3 所示的代码。
清单 3. 访问 img 元素
|
<html> <body> |
现在打开或重新加载该网页同样没有什么惊奇的地方。虽然现在能够访问图片，但是对它还什么也没有做。
修改图片，麻烦的办法
完成所需修改有两种方法:一种简单，一种麻烦。和所有的好程序员一样，我也喜欢简单的办法;但是运用较麻烦的办法是一次很好的 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> <body> |
可以加载该页面，但是不要期望有任何改变，因为目前所做的修改实际上还没有影响页面。另外，如果再看看任务列表中的第 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> <body> |
连接 javascript
最后一步，可能也是最简单的，就是把 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. 用新图片替换旧图片(一步完成)
|
<html> <body> |
当然这不是什么大的修改，但是说明了 dom 编码中一件很重要的事:执行一项任务通常有多种方法。如果仔细审阅可用 dom 方法看看是否有更简单的方法可以完成任务，很多时候都会发现可以将四五个步骤压缩为两三个步骤。
替换图片，(真正)简单的办法
既然指出了执行一项任务几乎总是有更简单的方法，现在就说明用兔子图片替换帽子图片的简单得多 的办法。阅读本文的过程中有没有想到这种方法?提示一下:与属性有关。
要记住，图片元素很大程度上是由其 src 属性控制的，他引用了某个地方的文件(不论是本地 uri 还是外部 url)。到目前为止，我们一直用新图片替换图片节点，但是直接修改已有图片的 src 属性要简单得多!这样就避免了创建新节点、寻找父节点和替换旧节点的所有工作，只要一步就能完成了:
| hatimage.setattribute("src", "rabbit-hat.gif"); |
这样就够了!看看清单 7，它显示了这种解决方案，包括整个网页。
清单 7. 修改 src 属性
|
<html> <body> |
这是 dom 最棒的一点:更新属性的时候网页马上就会改变。只要图片指向新的文件，浏览器就加载该文件，页面就更新了。不需要重新加载，甚至不需要创建新的图片元素!结果仍然和图 3 相同，只不过代码简单得多了。
把兔子藏起来
现在网页看起来很漂亮，但是仍然有点原始。虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 hocus pocus! 和调用 showrabbit()。这就是说如果在兔子出来之后仍然点击按钮，就是在浪费处理时间。更重要的是，它毫无用处，而没有用的按钮不是好东西。我们来看看能否利用 dom 再作一些修改，无论兔子在帽子里还是出来都让这个按钮派上用场。
修改按钮的标签
最简单的是当用户点击按钮之后改变它的标签。这样就不会看起来像还有什么魔法，网页中最糟糕的就是暗示用户错误的东西。在修改按钮的标签之前需要访问该节点，而在此之前需要引用按钮 id。这是老套路了，清单 8 为按钮增加了 id 属性。
清单 8. 增加 id 属性
|
<html> <body> |
现在用 javascript 访问按钮很简单了:
| 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> <body> |
把兔子收回去
从此新的按钮标签中可能已经猜到，现在要把兔子收回帽子中去。基本上和放兔子出来完全相反:将图片的 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> function hiderabbit() { <body> |
这样就得到了一个完成的、可以使用的 dom 应用程序。自己试试吧!
结束语
现在您应该非常熟悉 dom 了。前面的文章介绍了使用 dom 所涉及到的基本概念，详细地讨论了 api，现在又建立一个简单的基于 dom 的应用程序。一定要花点时间仔细阅读本文，并自己尝试一下。
虽然这是专门讨论文档对象模型的系列文章的最后一期，但肯定还会看到其他关于 dom 的文章。事实上，如果在 ajax 和 javascript 世界中不使用 dom 就很难做多少事，至少在一定程度上如此。无论要创建复杂的突出显示还是移动效果，或者仅仅处理文本块或图片，dom 都提供了一种非常简单易用的访问 web 页面的方式。
如果对如何使用 dom 仍然感觉没有把握，花点时间温习一下这三篇文章;本系列的其他文章在使用 dom 的时候不再多作解释，读者也不希望迷失在这些细节之中而忽略关于其他概念的重要信息，比如 xml 和 json。为了保证能够熟练地使用 dom，自己编写几个基于 dom 的应用程序试试，这样就很容易理解后面将要讨论的一些数据格式问题了。
闽公网安备 35060202000074号