- 浏览: 422909 次
- 性别:
文章分类
最新评论
-
wrw_ahut:
你这个怎么停下来?怎么跳转activity
Android启动界面实现 -
huiqoo:
高仿UC半透明MENU菜单(有图有真相) -
wenzhixin:
多谢分享~
Android启动界面实现 -
orange9711:
学习学习
Android启动界面实现 -
qinweiping:
问下楼主 好像这个反编译 只能看到程序的主体结构吧 还是和源程 ...
APK反编译利器Apktool下载及用法介绍
|
我们首先建立一个非常简单的应用程序,然后再添加一点 DOM 魔法。要记住,DOM 可以移动网页中的任何东西而不需要提交表单,因此足以和 Ajax 媲美;我们创建一个简单的网页,上面只显示一个普通的旧式大礼帽,还有一个标记为 Hocus Pocus! 的按钮(猜猜这是干什么的?)
清单 1 显示了这个网页的 HTML。除了标题和表单外,只有一个简单的图片和可以点击的按钮。
清单 1. 示例应用程序的 HTML
<html></html> <head></head> |
可以在本文后面的下载中找到这段 HTML 和本文中用到的图片。不过我强烈建议您只下载那个图片,然后随着本文中逐渐建立这个应用程序自己动手输入代码。这样要比读读本文然后直接打开完成的应用程序能够更好地理解 DOM 代码。
这里没有什么特别的窍门,打开网页可以看到图 1 所示的结果。
图 1. 难看的大礼帽
应该 注意的重要一点是,清单 1 和图 1 中按钮的类型是 button
而不是提交按钮。如果使用提交按钮,单击该按钮将导致浏览器提交表单,当然表单没有 action
属性(完全是有意如此),从而会造成没有任何动作的无限循环。(应该自己试试,看看会发生什么。)通过使用一般输入按钮而不是提交按钮,可以把 javaScript 函数和它连接起来与浏览器交互而无需 提交表单。
|
现在用一些 JavaScript、DOM 操作和小小的图片戏法装扮一下网页。
显然,魔法帽子没有兔子就没有看头了。这里首先用兔子的图片替换页面中原有的图片(再看看图 1),如图 2 所示。
图 2. 同样的礼帽,这一次有了兔子
完成这个 DOM 小戏法的第一步是找到网页中表示 img
元素的 DOM 节点。一般来说,最简单的办法是用 getElementById()
方法,它属于代表 Web 页面的 document
对象。前面已经见到过这个方法,用法如下:
var elementNode = document.getElementById("id-of-element"); |
这是非常简单的 JavaScript,但是需要修改一下 HTML:为需要访问的元素增加 id
属性。也就是希望(用带兔子的新图片)替换的 img
元素,因此将 HTML 改为清单 2 的形式。
清单 2. 增加 id 属性
<html></html> <head></head> |
如果重新加载(或者打开)该页面,可以看到毫无变化,增加 id
属性对网页的外观没有影响。不过,该属性可以帮助 JavaScript 和 DOM 更方便地处理元素。
现在可以很容易地使用 getElementById()
了。已经有了需要元素的 ID,即 topHat
,可以将其保存在一个新的 JavaScript 变量中。在 HTML 页面中增加清单 3 所示的代码。
清单 3. 访问 img 元素
<html></html> <head></head> <script language="JavaScript"> function showRabbit() { var hatImage = document.getElementById("topHat"); } </script> |
现在打开或重新加载该网页同样没有什么惊奇的地方。虽然现在能够访问图片,但是对它还什么也没有做。
|
完成所需修改有两种方法:一种简单,一种麻烦。和所有的好程序员一样,我也喜欢简单的办法;但是运用较麻烦的办法是一次很好的 DOM 练习,值得您花点时间。首先看看换图片比较麻烦的办法;后面再重新分析一下看看有没有更简单的办法。
用带兔子的新照片替换原有图片的办法如下:
- 创建新的
img
元素。 - 访问当前
img
元素的父元素,也就是它的容器。 - 在已有
img
元素之前 插入新的img
元素作为该容器的子级。 - 删除原来的
img
元素。 - 结合起来以便在用户单击 Hocus Pocus! 按钮时调用刚刚创建的 JavaScript 函数。
通过上两期文章应该记住 DOM 中最关键的是 document
对象。它代表整个网页,提供了 getElementById()
这样功能强大的方法,还能够创建新的节点。现在要用到的就是这最后一种性质。
具体而言,需要创建一个新的 img
元素。要记住,在 DOM 中一切都是节点,但是节点被进一步划分为三种基本类型:
- 元素
- 属性
- 文本节点
还有其他类型,但是这三种可以满足 99% 的编程需要。这里需要一个 img
类型的新元素。因此需要下列 JavaScript 代码:
var newImage = document.createElement("img"); |
这行代码可以创建一个 element
类型的新节点,元素名为 img
。在 HTML 中基本上就是:
要记住,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></html> <head></head> <script language="JavaScript"> function showRabbit() { var hatImage = document.getElementById("topHat"); var newImage = document.createElement("img"); newImage.setAttribute("src", "rabbit-hat.gif"); } </script> |
可以加载该页面,但是不要期望有任何改变,因为目前所做的修改实际上还没有影响页面。另外,如果再看看任务列表中的第 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></html> <head></head> <script language="JavaScript"> function showRabbit() { var hatImage = document.getElementById("topHat"); var newImage = document.createElement("img"); newImage.setAttribute("src", "rabbit-hat.gif"); var imgParent = hatImage.parentNode; imgParent.insertBefore(newImage, hatImage); imgParent.removeChild(hatImage); } </script> |
最后一步,可能也是最简单的,就是把 HTML 表单连接到刚刚编写的 JavaScript 函数。需要每当用户点击 Hocus Pocus! 按钮的时候运行 showRabbit()
函数。为此只要向 HTML 中增加一个简单的 onClick
事件处理程序即可。
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></html> <head></head> <script language="JavaScript"> function showRabbit() { var hatImage = document.getElementById("topHat"); var newImage = document.createElement("img"); newImage.setAttribute("src", "rabbit-hat.gif"); var imgParent = hatImage.parentNode; imgParent.replaceChild(newImage, hatImage); } </script> |
当然这不是什么大的修改,但是说明了 DOM 编码中一件很重要的事:执行一项任务通常有多种方法。如果仔细审阅可用 DOM 方法看看是否有更简单的方法可以完成任务,很多时候都会发现可以将四五个步骤压缩为两三个步骤。
|
既然指出了执行一项任务几乎总是有更简单的方法,现在就说明用兔子图片替换帽子图片的简单得多 的办法。阅读本文的过程中有没有想到这种方法?提示一下:与属性有关。
要记住,图片元素很大程度上是由其 src
属性控制的,他引用了某个地方的文件(不论是本地 URI 还是外部 URL)。到目前为止,我们一直用新图片替换图片节点,但是直接修改已有图片的 src
属性要简单得多!这样就避免了创建新节点、寻找父节点和替换旧节点的所有工作,只要一步就能完成了:
hatImage.setAttribute("src", "rabbit-hat.gif"); |
这样就够了!看看清单 7,它显示了这种解决方案,包括整个网页。
清单 7. 修改 src 属性
<html></html> <head></head> <script language="JavaScript"> function showRabbit() { var hatImage = document.getElementById("topHat"); hatImage.setAttribute("src", "rabbit-hat.gif"); } </script> |
这是 DOM 最棒的一点:更新属性的时候网页马上就会改变。只要图片指向新的文件,浏览器就加载该文件,页面就更新了。不需要重新加载,甚至不需要创建新的图片元素!结果仍然和图 3 相同,只不过代码简单得多了。
|
现在网页看起来很漂亮,但是仍然有点原始。虽然兔子从帽子中跳出来了,但是屏幕下方的按钮仍然显示 Hocus Pocus! 和调用 showRabbit()
。这就是说如果在兔子出来之后仍然点击按钮,就是在浪费处理时间。更重要的是,它毫无用处,而没有用的按钮不是好东西。我们来看看能否利用 DOM 再作一些修改,无论兔子在帽子里还是出来都让这个按钮派上用场。
最简单的是当用户点击按钮之后改变它的标签。这样就不会看起来像还有什么魔法,网页中最糟糕的就是暗示用户错误的东西。在修改按钮的标签之前需要访问该节点,而在此之前需要引用按钮 ID。这是老套路了,清单 8 为按钮增加了 id
属性。
清单 8. 增加 id 属性
<html></html> <head></head> <script language="JavaScript"> function showRabbit() { var hatImage = document.getElementById("topHat"); hatImage.setAttribute("src", "rabbit-hat.gif"); } </script> |
现在用 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></html> <head></head> <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> |
从此新的按钮标签中可能已经猜到,现在要把兔子收回帽子中去。基本上和放兔子出来完全相反:将图片的 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></html> <head></head> <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> |
这样就得到了一个完成的、可以使用的 DOM 应用程序。自己试试吧!
|
现在您应该非常熟悉 DOM 了。前面的文章介绍了使用 DOM 所涉及到的基本概念,详细地讨论了 API,现在又建立一个简单的基于 DOM 的应用程序。一定要花点时间仔细阅读本文,并自己尝试一下。
虽然这是专门讨论文档对象模型的系列文章的最后一期,但肯定还会看到其他关于 DOM 的文章。事实上,如果在 Ajax 和 JavaScript 世界中不使用 DOM 就很难做多少事,至少在一定程度上如此。无论要创建复杂的突出显示还是移动效果,或者仅仅处理文本块或图片,DOM 都提供了一种非常简单易用的访问 Web 页面的方式。
如果对如何使用 DOM 仍然感觉没有把握,花点时间温习一下这三篇文章;本系列的其他文章在使用 DOM 的时候不再多作解释,读者也不希望迷失在这些细节之中而忽略关于其他概念的重要信息,比如 XML 和 JSON。为了保证能够熟练地使用 DOM,自己编写几个基于 DOM 的应用程序试试,这样就很容易理解后面将要讨论的一些数据格式问题了。
发表评论
-
利用JS把Div等对象水平、垂直居中
2012-11-28 08:33 2240<script type="text/java ... -
div 实现长英文字母自动换行——兼容IE/FF/CHROME
2012-01-27 21:54 3817最近做个英文网站,DIV内的英文不能自动换行,搜了一下,都是用 ... -
一个JS加XML实现的菜单
2009-01-12 11:32 1101今天看到了一个菜单的实现,感觉不错,收藏之,演示地址:http ... -
JS控件--带时间
2007-12-05 18:42 1269在网上找的,觉得不错,收留之 -
JS中常用的xpath特性
2007-10-15 14:57 6811js 代码 //选择所有dir元素的值等于xx的 ... -
JavaScript 面向对象程序设计(上)——封装
2007-09-28 12:00 1632JavaScript 是一种非常灵 ... -
JavaScript 面向对象程序设计(下)——继承与多态
2007-09-28 11:42 24181 又是几个基本概念 为 ... -
表格隔行换色
2007-02-25 01:51 2018摘自: http://www.blueidea.c ... -
web一些值得珍藏的代码
2007-02-25 01:47 1362... -
javascript字符集转换函数
2007-01-25 09:31 6272function Str2Unicode(str){ var ... -
iframe自动调整高度
2006-12-20 22:51 3024<script type="text/java ... -
查看文件域地址
2006-12-23 21:48 1427onclick="alert(' File文件域的 ... -
javascript模拟windows control的进度条
2006-12-23 22:17 1488<script> function xyPro ... -
网页上内容导出到word里
2006-12-23 22:21 2712<meta http-equiv="Con ... -
省份,城市联动显示
2006-12-23 22:32 1855<meta http-equiv="Co ... -
客户端用JAVASCRIPT生成WORD文档
2006-12-23 22:37 2306<script language="javas ... -
利用xml实现多级关联下拉选择框
2006-12-23 22:52 1889<script>var arrSel=[ ... -
利用JScript/CSS 编程技术模拟实现TABView控件
2006-12-23 22:56 1622熟悉可视化界面编程的朋友一定很熟悉各种控件。在 ... -
javascript实现EMAIL推荐本页功能
2006-12-23 23:02 1366<script language="ja ... -
可输入的select
2006-12-23 23:03 1191<style type="text/css ...
相关推荐
在本篇“掌握Ajax系列6:建立基于DOM的Web应用程序”中,我们将深入探讨如何利用JavaScript操作DOM(文档对象模型)来创建一个无需刷新页面的动态Web页面。DOM是一种编程接口,它允许开发者通过JavaScript来访问和...
标题和描述均指向了一个主题,即“掌握Ajax的第六部分:建立基于DOM的Web应用程序”。这一部分的内容聚焦于如何在不刷新整个页面的情况下,利用DOM(Document Object Model,文档对象模型)来改变网页的界面。这是一...
Web应用程序设计是构建基于互联网的交互式系统的学科,它涵盖了多个关键领域,包括网页设计、服务器端编程、数据库管理和客户端脚本。在这个主题中,我们主要关注网站开发、Web Engineering (WED)、Active Server ...
首先,WebSocket API是HTML5的一个关键特性,它为Web应用程序提供了低延迟、双向通信的能力。与传统的HTTP不同,WebSocket一旦建立连接,就能保持开放状态,直到客户端或服务器关闭连接。这使得实时数据更新和推送变...
胡晓军_3"主要涵盖了Web应用程序开发的基础概念和技术,这部分内容通常包括HTML、CSS、JavaScript等前端技术,以及服务器端编程语言如PHP、Java或Python,以及数据库管理和交互。课程可能深入讲解了如何构建动态网页...
第 6 部分: 建立基于 DOM 的 Web 应用程序 65 第 7 部分: 在请求和响应中使用 XML 80 第 8 部分: 在请求和响应中使用 XML 87 第 9 部分: Web 2.0 用户界面技术 95 第 10 部分: 使用 JSON 进行数据传输 100 第 11 ...
掌握 Ajax第 1 部分-Ajax 简介 ...掌握 Ajax第 6 部分-建立基于 DOM 的 Web 应用程序 掌握 Ajax第 7 部分-在请求和响应中使用 XML 掌握 Ajax第 10 部分--使用 JSON 进行数据传输 掌握 Ajax第 11 部分--服务器端的 JSON
内容简要给大家说明一下:Ajax简介、使用Javascript和Ajax发出异步请求、Ajax中的高级请求响应、利用Dom进行Web响应、操作dom、建立基于Dom的Web应用程序、在请求和响应中使用XML、使用Json进行数据传输、...
RIA是一种网络应用程序,其采用的是Web应用程序,具有最佳用户界面功能,且可实现多媒体通信的实时互动。 2. 基于Web2.0的RIA框架设计 基于Web2.0的JavaScript RIA框架(AUI)设计的主要原则是:支持设计人员对...
然而,二进制大对象的存储也有其局限性,例如缺乏语义信息,需要应用程序开发者自行处理复杂数据的内容。但总体而言,结合Oracle的特性,可以实现高效、可靠的影像数据库管理系统。 总的来说,基于Oracle的DOM影像...
这门课程可能详细讲解了如何构建动态、交互式的Web应用程序,包括前端和后端的开发技术。浙江大学作为国内顶尖学府,其计算机科学教育质量有口皆碑,因此这门课程应该会提供深入且全面的理论知识和实践指导。 ...
第 6 部分: 建立基于 DOM 的 Web 应用程序 第 7 部分: 在请求和响应中使用 XML 第 8 部分:在请求和响应中使用 XML 第 9 部分: 使用 Google Ajax Search API 第 10 部分: 使用 JSON 进行数据传输 第 11 部分:将 ...
6. ASP(Active Server Pages):是微软开发的一种服务器端脚本环境,可以用来创建和运行动态网页或Web应用。ASP可以使用VBScript或JavaScript等脚本语言,并能够在服务器上生成HTML代码发送到浏览器。 7. DHTML...
传统的Web应用程序采用同步交互模式,用户请求后需等待服务器的完整响应,而基于Ajax的Web应用程序则引入了异步交互,可以只更新页面的一部分,提高响应速度和用户体验。 【B/S架构】B/S架构(Browser/Server,...
Zettelkasten Web应用程序的开发通常基于JavaScript,这是一种广泛用于构建Web应用程序的编程语言。JavaScript允许开发者创建交互性强、动态更新的用户界面,非常适合实时更新和链接笔记的场景。同时,JavaScript的...
《Web安全程序设计与实践》课程是一门深入探讨如何在Web开发中确保应用程序安全的重要学科。这门课程的配套教学资源包,包含了丰富的学习材料,旨在帮助学生和开发者理解并掌握Web安全的基本概念、常见威胁以及防御...
《实用JavaScript、DOM脚本与Ajax项目》一书由弗兰克·扎梅蒂撰写,旨在通过实践案例教授读者高级JavaScript技术,以构建卓越的Web应用程序。本书涵盖了JavaScript的核心概念,DOM(文档对象模型)的深入理解以及...
6. **JavaScript 应用程序开发**:由于 Applicationjs 基于 JavaScript,开发者需要熟悉 JavaScript 语法、DOM 操作、事件处理等基础知识,才能有效地使用这个库。 7. **Web 应用程序**:Applicationjs 适用于构建...
7.1 配置任意目录下的web应用程序 240 7.2 war文件 242 7.3 tomcat中servlet的另一种运行方式 244 7.4 与servlet配置相关的元素 247 7.4.1 [servlet]元素及其子元素 247 7.4.2 [servlet-mapping]元素及其子元素...