第 6 部分 建立基于 DOM 的 Web 应用程序.docx

第 6 部分 建立基于 DOM 的 Web 应用程序.docx

《第 6 部分 建立基于 DOM 的 Web 应用程序.docx》由会员分享，可在线阅读，更多相关《第 6 部分 建立基于 DOM 的 Web 应用程序.docx（22页珍藏版）》请在冰点文库上搜索。

第6部分建立基于DOM的Web应用程序

前面两期文章已经详细介绍了文档对象模型或者DOM，读者应该很清楚DOM是如何工作的了。

（前两期DOM文章以及Ajax系列更早文章的链接请参阅参考资料。

）本教程中将把这些知识用于实践。

我们将开发一个简单的Web应用程序，其用户界面可根据用户动作改变，当然要使用DOM来处理界面的改变。

阅读完本文之后，就已经把学习到的关于DOM的技术和概念付诸应用了。

假设读者已经阅读过上两期文章，如果还没有的话，请先看一看，切实掌握什么是DOM以及Web浏览器如何将提供给它的HTML和CSS转化成单个表示网页的树状结构。

到目前为止我一直在讨论的所有DOM原理都将在本教程中用于创建一个能工作的（虽然有点简单）基于DOM的动态Web页面。

如果遇到不懂的地方，可以随时停下来复习一下前面的两期文章然后再回来。

从一个示例应用程序开始

关于代码的说明

为了把注意力集中到DOM和JavaScript代码上，我编写HTML的时候有些随意地采用内联样式（比如 h1 和 p 元素的 align 属性）。

虽然对实验来说这样做是可接受的，但是对于开发的任何产品应用程序，我建议花点时间把所有的样式都放到外部CSS样式表中。

我们首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。

要记住，DOM可以移动网页中的任何东西而不需要提交表单，因此足以和Ajax媲美；我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 HocusPocus!

 的按钮（猜猜这是干什么的？

）

初始HTML

清单1 显示了这个网页的HTML。

除了标题和表单外，只有一个简单的图片和可以点击的按钮。

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

WelcometotheDOMMagicShop!

"/>

可以在本文后面的下载中找到这段HTML和本文中用到的图片。

不过我强烈建议您只下载那个图片，然后随着本文中逐渐建立这个应用程序自己动手输入代码。

这样要比读读本文然后直接打开完成的应用程序能够更好地理解DOM代码。

查看示例网页

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

图1.难看的大礼帽

关于HTML的补充说明

应该 注意的重要一点是，清单1 和图1 中按钮的类型是 button 而不是提交按钮。

如果使用提交按钮，单击该按钮将导致浏览器提交表单，当然表单没有 action 属性（完全是有意如此），从而会造成没有任何动作的无限循环。

（应该自己试试，看看会发生什么。

）通过使用一般输入按钮而不是提交按钮，可以把javaScript函数和它连接起来与浏览器交互而无需 提交表单。

回页首

向示例应用程序添加元素

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

使用getElementById（）函数

显然，魔法帽子没有兔子就没有看头了。

这里首先用兔子的图片替换页面中原有的图片（再看看图1），如图2 所示。

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

完成这个DOM小戏法的第一步是找到网页中表示 img 元素的DOM节点。

一般来说，最简单的办法是用 getElementById（） 方法，它属于代表Web页面的 document 对象。

前面已经见到过这个方法，用法如下：

varelementNode=document.getElementById（"id-of-element"）;

为HTML添加id属性

这是非常简单的JavaScript，但是需要修改一下HTML：

为需要访问的元素增加 id 属性。

也就是希望（用带兔子的新图片）替换的img 元素，因此将HTML改为清单2 的形式。

清单2.增加id属性

WelcometotheDOMMagicShop!

"/>

如果重新加载（或者打开）该页面，可以看到毫无变化，增加 id 属性对网页的外观没有影响。

不过，该属性可以帮助JavaScript和DOM更方便地处理元素。

抓住img元素

现在可以很容易地使用 getElementById（） 了。

已经有了需要元素的ID，即 topHat，可以将其保存在一个新的JavaScript变量中。

在HTML页面中增加清单3 所示的代码。

清单3.访问img元素

functionshowRabbit（）{

varhatImage=document.getElementById（"topHat"）;

}

WelcometotheDOMMagicShop!

"/>

现在打开或重新加载该网页同样没有什么惊奇的地方。

虽然现在能够访问图片，但是对它还什么也没有做。

回页首

修改图片，麻烦的办法

完成所需修改有两种方法：

一种简单，一种麻烦。

和所有的好程序员一样，我也喜欢简单的办法；但是运用较麻烦的办法是一次很好的DOM练习，值得您花点时间。

首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法。

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

1.创建新的 img 元素。

2.访问当前 img 元素的父元素，也就是它的容器。

3.在已有 img 元素之前 插入新的 img 元素作为该容器的子级。

4.删除原来的 img 元素。

5.结合起来以便在用户单击 HocusPocus!

 按钮时调用刚刚创建的JavaScript函数。

创建新的img元素

通过上两期文章应该记住DOM中最关键的是 document 对象。

它代表整个网页，提供了 getElementById（） 这样功能强大的方法，还能够创建新的节点。

现在要用到的就是这最后一种性质。

具体而言，需要创建一个新的 img 元素。

要记住，在DOM中一切都是节点，但是节点被进一步划分为三种基本类型：

∙元素

∙属性

∙文本节点

还有其他类型，但是这三种可以满足99%的编程需要。

这里需要一个 img 类型的新元素。

因此需要下列JavaScript代码：

varnewImage=document.createElement（"img"）;

这行代码可以创建一个 element 类型的新节点，元素名为 img。

在HTML中基本上就是：

要记住，DOM会创建结构良好的HTML，就是说这个目前为空的元素包括起始和结束标签。

剩下的就是向该元素增加内容或属性，然后将其插入到网页中。

对内容来说，img 是一个空元素。

但是需要增加一个属性 src，它指定了要加载的图片。

您也许认为要使用 addAttribute（） 之类的方法，但情况并非如此。

DOM规范的制定者认为程序员可能喜欢简洁（的确如此！

），因此他们规定了一个方法同时用于增加新属性和改变已有的属性值：

setAttribute（）。

如果对已有的属性调用 setAttribute（），则把原来的值替换为指定的值。

但是，如果调用 setAttribute（） 并指定一个不 存在的属性，DOM就会使用提供的值增加一个属性。

一个方法，两种用途！

因此需要增加下列JavaScript代码：

varnewImage=document.createElement（"img"）;

newImage.setAttribute（"src","rabbit-hat.gif"）;

它创建一个图片元素然后设置适当的资源属性。

现在，HTML应该如清单4 所示。

清单4.使用DOM创建新图片

functionshowRabbit（）{

varhatImage=document.getElementById（"topHat"）;

varnewImage=document.createElement（"img"）;

newImage.setAttribute（"src","rabbit-hat.gif"）;

}

WelcometotheDOMMagicShop!

"/>

可以加载该页面，但是不要期望有任何改变，因为目前所做的修改实际上还没有影响页面。

另外，如果再看看任务列表中的第5步，就会发现还没有调用我们的JavaScript函数！

获得原始图片的父元素

现在有了要插入的图片，还需要找到插入的地方。

但是不能将其插入到已有的图片中，而是要将其插入到已有图片之前然后再删除原来的图片。

为此需要知道已有图片的父元素，实际上这就是插入和删除操作的真正关键所在。

应该记得，前面的文章中曾经指出DOM确实把网页看成一棵树，即节点的层次结构。

每个节点都有父节点（树中更高层次的节点，该节点是它的一个子级），可能还有自己的子节点。

对于图片来说，它没有子级——要记住图片是空元素，但是它肯定有父节点。

甚至不需要知道父节点是什么，但是需要访问它。

为此，只要使用每个DOM节点都有的 parentNode 属性即可，比如：

varimgParent=hatImage.parentNode;

确实非常简单！

可以肯定这个节点有子节点，因为已经有了一个：

原来的图片。

此外，完全不需要知道它是一个 div、p 或者页面的body，都没有关系！

插入新图片

现在得到了原来图片的父节点，可以插入新的图片了。

很简单，有多种方法可以添加子节点：

∙insertBefore（newNode,oldNode）

∙appendChild（newNode）

因为希望把新图片放在旧图片的位置上，需要使用 insertBefore（）（后面还要使用 removeChild（） 方法）。

可使用下面这行JavaScript代码把新图片元素插入到原有图片之前：

varimgParent=hatImage.parentNode;

imgParent.insertBefore（newImage,hatImage）;

现在原图片的父元素有了两个 子元素：

新图片和紧跟在后面的旧图片。

必须指出，这里包围 这些图片的内容没有变，而且这些内容的顺序也和插入之前完全相同。

仅仅是这个父节点中增加了一个子节点，即旧图片之前的新图片。

删除旧图片

现在只需要删除旧图片，因为网页中只需要新图片。

很简单，因为已经得到了旧图片元素的父节点。

只要调用 removeChild（） 并把需要删除的节点传递给它即可：

varimgParent=hatImage.parentNode;

imgParent.insertBefore（newImage,hatImage）;

imgParent.removeChild（hatImage）;

现在，用新图片替换旧图片的工作已基本完成了。

HTML应该如清单5 所示。

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

functionshowRabbit（）{

varhatImage=document.getElementById（"topHat"）;

varnewImage=document.createElement（"img"）;

newImage.setAttribute（"src","rabbit-hat.gif"）;

varimgParent=hatImage.parentNode;

imgParent.insertBefore（newImage,hatImage）;

imgParent.removeChild（hatImage）;

}

WelcometotheDOMMagicShop!

"/>

连接JavaScript

最后一步，可能也是最简单的，就是把HTML表单连接到刚刚编写的JavaScript函数。

需要每当用户点击 HocusPocus!

 按钮的时候运行 showRabbit（） 函数。

为此只要向HTML中增加一个简单的 onClick 事件处理程序即可。

"onClick="showRabbit（）;"/>

这种简单的JavaScript编程应该非常容易了。

将其添加到HTML页面中，保存它然后在Web浏览器中打开。

页面初看起来应该和图1 相同，但是点击 HocusPocus!

 后应该看到图3 所示的结果。

图3.兔子戏法

回页首

替换图片，简单的办法

如果回顾替换图片的步骤，再看看节点的各种方法，可能会注意到方法 replaceNode（）。

该方法可用于把一个节点替换为另一个节点。

再考虑一下前面的步骤：

1.创建新的 img 元素。

2.访问当前 img 元素的父元素，也就是它的容器。

3.在已有 img 元素之前 插入新的 img 元素作为该容器的子元素。

4.删除原来的 img 元素。

5.连接起来以便在用户点击 HocusPocus!

 的时候调用刚刚创建的JavaScript函数。

使用 replaceNode（） 可以减少需要的步骤数。

可以将第3步和第4步合并在一起：

1.创建新的 img 元素。

2.访问当前 img 元素的父元素，也就是它的容器。

3.用创建的新元素替换旧的 img 元素。

4.连接起来以便在用户点击 HocusPocus!

 的时候调用刚刚创建的JavaScript函数。

这看起来不是什么大事，但确实能够简化代码。

清单6 说明了这种修改：

去掉了 insertBefore（） 和 removeChild（） 方法调用。

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

functionshowRabbit（）{

varhatImage=document.getElementById（"topHat"）;

varnewImage=document.createElement（"img"）;

newImage.setAttribute（"src","rabbit-hat.gif"）;

varimgParent=hatImage.parentNode;

imgParent.replaceChild（newImage,hatImage）;

}

WelcometotheDOMMagicShop!

"onClick="showRabbit（）;"/>

当然这不是什么大的修改，但是说明了DOM编码中一件很重要的事：

执行一项任务通常有多种方法。

如果仔细审阅可用DOM方法看看是否有更简单的方法可以完成任务，很多时候都会发现可以将四五个步骤压缩为两三个步骤。

回页首

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

既然指出了执行一项任务几乎总是有更简单的方法，现在就说明用兔子图片替换帽子图片的简单得多 的办法。

阅读本文的过程中有没有想到这种方法？

提示一下：

与属性有关。

要记住，图片元素很大程度上是由其 src 属性控制的，他引用了某个地方的文件（不论是本地URI还是外部URL）。

到目前为止，我们一直用新图片替换图片节点，但是直接修改已有图片的 src 属性要简单得多！

这样就避免了创建新节点、寻找父节点和替换旧节点的所有工作，只要一步就能完成了：

hatImage.setAttribute（"src","rabbit-hat.gif"）;

这样就够了！

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

清单7.修改src属性

functionshowRabbit（）{

varhatImage=document.getElementById（"topHat"）;

hatImage.setAttribute（"src","rabbit-hat.gif"）;

}

WelcometotheDOMMagicShop!

"onClick="showRabbit（）;"/>

这是DOM最棒的一点：

更新属性的时候网页马上就会改变。

只要图片指向新的文件，浏览器就加载该文件，页面就更新了。

不需要重新加载，甚至不需要创建新的图片元素！

结果仍然和图3 相同，只不过代码简单得多了。

回页首

把兔子藏起来

现在网页看起来很漂亮，但是仍然有点原始。

虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 HocusPocus!

 和调用showRabbit（）。

这就是说如果在兔子出来之后仍然点击按钮，就是在浪费处理时间。

更重要的是，它毫无用处，而没有用的按钮不是好东西。

我们来看看能否利用DOM再作一些修改，无论兔子在帽子里还是出来都让这个按钮派上用场。

修改按钮的标签

最简单的是当用户点击按钮之后改变它的标签。

这样就不会看起来像还有什么魔法，网页中最糟糕的就是暗示用户错误的东西。

在修改按钮的标签之前需要访问该节点，而在此之前需要引用按钮ID。

这是老套路了，清单8 为按钮增加了 id 属性。

清单8.增加id属性

functionshowRabbit（）{

varhatImage=document.getElementById（"topHat"）;

hatImage.setAttribute（"src","rabbit-hat.gif"）;

}

WelcometotheDOMMagicShop!

"id="hocusPocus"

onClick="showRabbit（）;"/>

现在用JavaScript访问按钮很简单了：

functionshowRabbit（）{

var