轻松使用 dom 的技巧和诀窍

《轻松使用 dom 的技巧和诀窍》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、轻松使用DOM的技巧和诀窍文档对象模型（DocumentObjectModel，DOM）是用于操纵XML和HTML数据的最常用工具之一，然而它的潜力却很少被充分挖掘出来。通过利用DOM的优势，并使它更加易用，您将获得一款应用于XML应用程序（包括动态Web应用程序）的强大工具。本期文章介绍了一位客串的专栏作家，同时也是我的朋友和同事DetheElza。Dethe在利用XML进行Web应用程序开发方面经验丰富，在此，我要感谢他对我在介绍使用DOM和ECMAScript进行XML编程这一方面的帮助。请密切关注本专栏，以了解Dethe的更多专栏文章。——DavidMertzDOM是处理XML和HTM

2、L的标准API之一。由于它占用内存大、速度慢，并且冗长，所以经常受到人们的指责。尽管如此，对于很多应用程序来说，它仍然是最佳选择，而且比XML的另一个主要API——SAX无疑要简单得多。DOM正逐渐出现在一些工具中，比如Web浏览器、SVG浏览器、OpenOffice，等等。DOM很好，因为它是一种标准，并且被广泛地实现，同时也内置到其他标准中。作为标准，它对数据的处理与编程语言无关（这可能是优点，也可能是缺点，但至少使我们处理数据的方式变得一致）。DOM现在不仅内置于Web浏览器，而且也成为许多基于XML的规范的一部分。既然它已经成为您的工具的一部分，并且或许您偶尔还会使用它，我想现在应该充

3、分利用它给我们带来的功能了。在使用DOM一段时间后，您会看到形成了一些模式——您想要反复做的事情。快捷方式可以帮助您处理冗长的DOM，并创建自解释的、优雅的代码。这里收集了一些我经常使用的技巧和诀窍，还有一些javascript示例。insertAfter和prependChild第一个诀窍就是“没有诀窍”。DOM有两种方法将孩子节点添加到容器节点（常常是一个Element，也可能是一个Document或DocumentFragment）：appendChild（node）和insertBefore（node,referenceNode）。看起来似乎缺少了什么。假如我想在一个参考节点后面插入或

4、者由前新增（prepend）一个子节点（使新节点位于列表中的第一位），我该怎么做呢？很多年以来，我的解决方法是编写下列函数：清单1.插入和由前新增的错误方法functioninsertAfter（parent,node,referenceNode）{if（referenceNode.nextSibling）{parent.insertBefore（node,referenceNode.nextSibling）；}else{parent.appendChild（node）；}}functionprependChild（parent,node）{if（parent.firstChild）{pare

5、nt.insertBefore（node,parent.firstChild）；}else{parent.appendChild（node）；}}实际上，像清单1一样，insertBefore（）函数已经被定义为，在参考节点为空时返回到appendChild（）。因此，您可以不使用上面的方法，而使用清单2中的方法，或者跳过它们仅使用内置函数：清单2.插入和由前新增的正确方法functioninsertAfter（parent,node,referenceNode）{parent.insertBefore（node,referenceNode.nextSibling）；}functionprep

6、endChild（parent,node）{parent.insertBefore（node,parent.firstChild）；}如果您刚刚接触DOM编程，有必要指出的是，虽然您可以使多个指针指向一个节点，但该节点只能存在于DOM树中的一个位置。因此，如果您想将它插入到树中，没必要先将它从树中移除，因为它会自动被移除。当重新将节点排序时，这种机制很方便，仅需将节点插入到新位置即可。根据这种机制，若想交换两个相邻节点（称为node1和node2）的位置，可以使用下列方案之一：node1.parentNode.insertBefore（node2,node1）；或node1.parentNod

7、e.insertBefore（node1.nextSibling,node1）；还可以使用DOM做什么？Web页面中大量应用了DOM。若访问bookmarklets站点（参阅参考资料），您会发现很多有创意的简短脚本，它们可以重新编排页面，提取链接，隐藏图片或Flash广告，等等。但是，因为InternetEXPlorer没有定义Node接口常量（可以用于识别节点类型），所以您必须确保在遗漏接口常量