XML 问题: 超越 DOM

转载 2006年05月22日 13:03:00

Dethe Elza, 高级技术架构师, Blast Radius

2005 年 6 月 16 日

文档对象模型(Document Object Model,DOM)是用于操纵 XML 和 HTML 数据的最常用工具之一,然而它的潜力却很少被充分挖掘出来。通过利用 DOM 的优势,并使它更加易用,您将获得一款应用于 XML 应用程序(包括动态 Web 应用程序)的强大工具。

本期文章介绍了一位客串的专栏作家,同时也是我的朋友和同事 Dethe Elza。Dethe 在利用 XML 进行 Web 应用程序开发方面经验丰富,在此,我要感谢他对我在介绍使用 DOM 和 ECMAScript 进行 XML 编程这一方面的帮助。请密切关注本专栏,以了解 Dethe 的更多专栏文章。 —— David Mertz

DOM 是处理 XML 和 HTML 的标准 API 之一。由于它占用内存大、速度慢,并且冗长,所以经常受到人们的指责。尽管如此,对于很多应用程序来说,它仍然是最佳选择,而且比 XML 的另一个主要 API —— SAX 无疑要简单得多。DOM 正逐渐出现在一些工具中,比如 Web 浏览器、SVG 浏览器、OpenOffice,等等。

DOM 很好,因为它是一种标准,并且被广泛地实现,同时也内置到其他标准中。作为标准,它对数据的处理与编程语言无关(这可能是优点,也可能是缺点,但至少使我们处理数据的方式变得一致)。DOM 现在不仅内置于 Web 浏览器,而且也成为许多基于 XML 的规范的一部分。既然它已经成为您的工具的一部分,并且或许您偶尔还会使用它,我想现在应该充分利用它给我们带来的功能了。

在使用 DOM 一段时间后,您会看到形成了一些模式 —— 您想要反复做的事情。快捷方式可以帮助您处理冗长的 DOM,并创建自解释的、优雅的代码。这里收集了一些我经常使用的技巧和诀窍,还有一些 JavaScript 示例。

insertAfter 和 prependChild

第一个诀窍就是“没有诀窍”。DOM 有两种方法将孩子节点添加到容器节点(常常是一个 Element,也可能是一个 DocumentDocumentFragment):appendChild(node)insertBefore(node, referenceNode)。看起来似乎缺少了什么。假如我想在一个参考节点后面插入或者由前新增(prepend)一个子节点(使新节点位于列表中的第一位),我该怎么做呢?很多年以来,我的解决方法是编写下列函数:


清单 1. 插入和由前新增的错误方法



实际上,像清单 1 一样,insertBefore() 函数已经被定义为,在参考节点为空时返回到 appendChild()。因此,您可以不使用上面的方法,而使用 清单 2 中的方法,或者跳过它们仅使用内置函数:


清单 2. 插入和由前新增的正确方法



如果您刚刚接触 DOM 编程,有必要指出的是,虽然您可以使多个指针指向一个节点,但该节点只能存在于 DOM 树中的一个位置。因此,如果您想将它插入到树中,没必要先将它从树中移除,因为它会自动被移除。当重新将节点排序时,这种机制很方便,仅需将节点插入到新位置即可。

根据这种机制,若想交换两个相邻节点(称为 node1node2)的位置,可以使用下列方案之一:









还可以使用 DOM 做什么?

Web 页面中大量应用了 DOM。若访问 bookmarklets 站点(参阅 参考资料),您会发现很多有创意的简短脚本,它们可以重新编排页面,提取链接,隐藏图片或 Flash 广告,等等。

但是,因为 Internet Explorer 没有定义 Node 接口常量(可以用于识别节点类型),所以您必须确保在遗漏接口常量时,首先为 Web 在 DOM 脚本中定义接口常量。


清单 3. 确保节点被定义



清单 4 展示如何提取包含在节点中的所有文本节点:


清单 4. 内部文本







快捷方式

人们常常抱怨 DOM 太过冗长,并且简单的功能也需要编写大量代码。例如,如果您想创建一个包含文本并响应点击按钮的 <div> 元素,代码可能类似于:


清单 5. 创建 <div> 的“漫长之路”



若频繁按照这种方式创建节点,键入所有这些代码会使您很快疲惫不堪。必须有更好的解决方案 —— 确实有这样的解决方案!下面这个实用工具可以帮助您创建元素、设置元素属性和风格,并添加文本子节点。除了 name 参数,其他参数都是可选的。


清单 6. 函数 elem() 快捷方式



使用该快捷方式,您能够以更加简洁的方法创建 清单 5 中的 <div> 元素。注意,attrsstyle 参数是使用 JavaScript 文本对象而给出的。


清单 7. 创建 <div> 的简便方法



在您想要快速创建大量复杂的 DHTML 对象时,这种实用工具可以节省您大量的时间。模式在这里就是指,如果您有一种需要频繁创建的特定的 DOM 结构,则使用实用工具来创建它们。这不但减少了您编写的代码量,而且也减少了重复的剪切、粘贴代码(错误的罪魁祸首),并且在阅读代码时思路更加清晰。





回页首


接下来是什么?

DOM 通常很难告诉您,按照文档的顺序,下一个节点是什么。下面有一些实用工具,可以帮助您在节点间前后移动:


清单 8. nextNode 和 prevNode







回页首


轻松使用 DOM

有时候,您可能想要遍历 DOM,在每个节点调用函数或从每个节点返回一个值。实际上,由于这些想法非常具有普遍性,所以 DOM Level 2 已经包含了一个称为 DOM Traversal and Range 的扩展(为迭代 DOM 所有节点定义了对象和 API),它用来为 DOM 中的所有节点应用函数和在 DOM 中选择一个范围。因为这些函数没有在 Internet Explorer 中定义(至少目前是这样),所以您可以使用 nextNode() 来做一些类似的事情。

在这里,我们的想法是创建一些简单、普通的工具,然后以不同的方式组装它们来达到预期的效果。如果您很熟悉函数式编程,这看起来会很亲切。Beyond JS 库(参阅 参考资料)将此理念发扬光大。


清单 9. 函数式 DOM 实用工具



清单 9 包含了 4 个基本工具。listNodes()listNodesReversed() 函数可以扩展到一个可选的长度,这与 Arrayslice() 方法效果类似,我把这个作为留给您的练习。另一个需要注意的是,map()filter() 函数是完全通用的,用于处理任何 列表(不只是节点列表)。现在,我向您展示它们的几种组合方式。


清单 10. 使用函数式实用工具



您可以使用这些实用工具来提取 ID、修改样式、找到某种节点并移除,等等。一旦 DOM Traversal and Range API 被广泛实现,您无需首先构建列表,就可以用它们修改 DOM 树。它们不但功能强大,并且工作方式也与我在上面所强调的方式类似。

DOM 的危险地带

注意,核心 DOM API 并不能使您将 XML 数据解析到 DOM,或者将 DOM 序列化为 XML。这些功能都定义在 DOM Level 3 的扩展部分“Load and Save”,但它们还没有被完全实现,因此现在不要考虑这些。每个平台(浏览器或其他专业 DOM 应用程序)有自己在 DOM 和 XML 间转换的方法,但跨平台转换不在本文讨论范围之内。

DOM 并不是十分安全的工具 —— 特别是使用 DOM API 创建不能作为 XML 序列化的树时。绝对不要在同一个程序中混合使用 DOM1 非名称空间 API 和 DOM2 名称空间感知的 API(例如,createElementcreateElementNS)。如果您使用名称空间,请尽量在根元素位置声明所有名称空间,并且不要覆盖名称空间前缀,否则情况会非常混乱。一般来说,只要按照惯例,就不会触发使您陷入麻烦的临界情况。

如果您一直使用 Internet Explorer 的 innerTextinnerHTML 进行解析,那么您可以试试使用 elem() 函数。通过构建类似的一些实用工具,您会得到更多便利,并且继承了跨平台代码的优越性。将这两种方法混合使用是非常糟糕的。

某些 Unicode 字符并没有包含在 XML 中。DOM 的实现使您可以添加它们,但后果是无法序列化。这些字符包括大多数的控制字符和 Unicode 代理对(surrogate pair)中的单个字符。只有您试图在文档中包含二进制数据时才会遇到这种情况,但这是另一种转向(gotcha)情况。

 


结束语

我已经介绍了 DOM 能做的很多事情,但是 DOM(和 JavaScript)可以做的事情远不止这些。仔细研究、揣摩这些例子,看看是如何使用它们来解决可能需要客户端脚本、模板或专用 API 的问题。

DOM 有自己的局限性和缺点,但同时也拥有众多优点:它内置于很多应用程序中;无论使用 Java 技术、Python 或 JavaScript,它都以相同方式工作;它非常便于使用 SAX;使用上述的模板,它使用起来既简洁又强大。越来越多的应用程序开始支持 DOM,这包括基于 Mozilla 的应用程序、OpenOffice 和 Blast Radius 的 XMetaL。越来越多的规范需要 DOM,并对它加以扩展(例如,SVG),因此 DOM 时时刻刻就在您的身边。使用这种被广泛部署的工具,绝对是您的明智之举。


 

参考资料

  • 您可以参阅本文在 developerWorks 全球站点上的 英文原文

  • 下载 JavaScript 库,它包含了上面的脚本和一个用于测试这些脚本的简单 测试页面

  • 直接访问 DOM 发源地 —— W3C 的 DOM 资源页面 ,其中包含到所有与文档对象模型相关的标准的链接。

  • 查看 Jesse Ruderman 的 bookmarklets。虽然 Ruderman 没有创造术语“bookmarkets”,但他收集了很多一流的、简短的、书签似的 JavaScript,使用它们开发 DOM 的巨大潜力,使您的浏览器可以为您带来更多帮助。

  • 访问 Sjoerd Visscher 的 Beyond JS 库,它提供了远远超过我在这里提及的用于函数式编程的工具。如果您可以将事物抽象为函数,那么 JavaScript 将会成为您得心应手的工具。

  • DOM API 的标准参考在 W3C。这里是 DOM2 到 JavaScript (ECMAScript)映射 的网址。

  • 了解 AJAX 为什么已经引起了这么大的反响。它使用了异步调用来使服务器实时升级 Web 应用程序。您可以使用上述的许多技术,并阅读 异步通信工具

  • 了解一下 XML 编辑器和工具的 XMetaL 系列,它们都支持 DOM API。它们由作者所在的公司 Blast Radius 开发。

  • 在 developerWorks 的 Developer Bookstore 了解更多 XMl 相关的书籍,其中包括 David Mertz 的 Text Processing in Python 一书。
  • 了解如何才能成为 IBM 认证的 XML 及相关技术的开发人员

 


 

关于作者

Dethe Elza 现在最喜爱的头衔是“首席疯狂科学家(Chief Mad Scientist)”。可以通过电子邮件 delza@livingcode.org 与他联系。他在 http://livingcode.blogspot.com/ 上主要记录着关于 Python 和 Mac OS X 方面的 blog。欢迎对本专栏提出意见和建议。

XML 问题: 超越 DOM

来源:http://www.ibm.com/developerworks/cn/xml/x-matters41.html  DOM 是处理 XML 和 HTML 的标准 API 之一。由于它占用内存...

Dom4j解析XML及中文问题

  • 2011年09月13日 15:29
  • 57KB
  • 下载

Dom4j读取XML文件时遇到的一个问题(关于DTD)

最近做一个小项目,要用到Dom4j对XML文件进行读取,获得数据库配置信息,XML文件如下: com.microsoft.sqlserver.jdbc.SQLServerD...

Dom4j方式解析XML乱码问题详解

1.  引起乱码的原因 现象:将内存中的Document对象保存到持久化设备生成XML文件后,XML文件无法正常打开,出现乱码。 表面原因:因为XML文件的真正格式(即XML文件保存在持久化设备上...
  • MyTroy
  • MyTroy
  • 2014年11月30日 17:06
  • 1375

Android4.0和Android2.3,2.2以及其他版本DOM解析XML问题

今天在项目中遇到一个无奈的问题!困扰了我很久,后来和同事的代码中和一下终于发现了,这个是DOM解析xml的问题,贴代码说明问题: 问题代码如下: DocumentBuilderFactory...

xml文档解析之dom4j的增删改查 ,乱码问题

基于Dom解析和SAX解析这两种解析思想,出现了许多解析API,其中dom4j可以使用dom解析的方式高效的解析xml文档。dom4j解析在使用时需要导入第三方jar包,dom4j的开发包可以在网上找...

dom4j生成xml文件,解析后出现中文乱码问题

背景(可以忽略)项目在本地写完了,和队友测试都通过了,最后部署到云端,云端服务器是Windows Server 2008 R2 Standard操作系统,部署到云端后再次和队友测试一下,就出现了问题。...

利用Dom读取和修改XML文件,并处理获取路径中空格(%20)问题

写了两天,好多都忘了,今天给大家

用dom解析xml的方法实现二级菜单级联及它们中出现的浏览器兼容问题

今天做关于用解析xml的方法实现二级菜单级联的时候,出现了浏览器不统一的问题,在IE浏览器中ok,在火狐浏览器中不行,后来发现,火狐浏览器在解析xml的时候出现了空格和换行,所以做了更改,代码如下:-...

关于用dom4j生成xml后第二行空行的问题

之前碰到这个问题,困扰了我很久没解决.百度了一下很少.所以刚解决就来给大家分享一下 package one; import java.io.FileOutputStream; import org....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:XML 问题: 超越 DOM
举报原因:
原因补充:

(最多只允许输入30个字)