【IT168技术文档】


  文档对象模型（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，也可能是一个 Document 或 Document Fragment）：appendChild(node) 和 insertBefore(node, referenceNode)。看起来似乎缺少了什么。假如我想在一个参考节点后面插入或者由前新增（prepend）一个子节点（使新节点位于列表中的第一位），我该怎么做呢？很多年以来，我的解决方法是编写下列函数：

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

function insertAfter(parent, node, referenceNode) {
if(referenceNode.nextSibling) {
parent.insertBefore(node, referenceNode.nextSibling);
} else {
parent.appendChild(node);
}
}
function prependChild(parent, node) {
if (parent.firstChild) {
parent.insertBefore(node, parent.firstChild);
} else {
parent.appendChild(node);
}
}

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

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

function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}
function prependChild(parent, node) {
parent.insertBefore(node, parent.firstChild);
}