在您想要快速创建大量复杂的 DHTML 对象时，这类实用工具可以节省您大量的时间。模式在这里就是指，假设您有1种需要频繁创建的特定的 DOM 结构，则使用实用工具来创建它们。这不但减少了您编写的代码量，而且也减少了重复的剪切、粘贴代码（毛病的罪魁罪魁），并且在浏览代码时思路更加清楚。
   
    接下来是甚么？
    DOM 通常很难告知您，依照文档的顺序，下1个节点是甚么。下面有1些实用工具，可以帮助您在节点间前后移动：

清单 8. nextNode 和 prevNode
// return next node in document order
function nextNode(node) {
    if (!node) return null;
    if (node.firstChild){
        return node.firstChild;
    } else {
        return nextWide(node);
    }
}
// helper function for nextNode()
function nextWide(node) {
    if (!node) return null;
    if (node.nextSibling) {
        return node.nextSibling;
    } else {
        return nextWide(node.parentNode);
    }
}
// return previous node in document order
function prevNode(node) {
    if (!node) return null;
    if (node.previousSibling) {
      return previousDeep(node.previousSibling);
    }
    return node.parentNode;
}
// helper function for prevNode()
function previousDeep(node) {
    if (!node) return null;
    while (node.childNodes.length) {
        node = node.lastChild;
    }
    return node;
}
 

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

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

清单 9. 函数式 DOM 实用工具
// return an Array of all nodes, starting at startNode and
// continuing through the rest of the DOM tree
function listNodes(startNode) {
    var list = new Array();
    var node = startNode;
    while(node) {
        list.push(node);
        node = nextNode(node);
    }
    return list;
}
// The same as listNodes(), but works backwards from startNode.
// Note that this is not the same as running listNodes() and
// reversing the list.
function listNodesReversed(startNode) {
    var list = new Array();
    var node = startNode;
    while(node) {
        list.push(node);
        node = prevNode(node);
    }
    return list;
}
// apply func to each node in nodeList, return new list of results
function map(list, func) {
    var result_list = new Array();
    for (var i = 0; i < list.length; i++) {
        result_list.push(func(list[i]));
    }
    return result_list;
}
// apply test to each node, return a new list of nodes for which
// test(node) returns true
function filter(list, test) {
    var result_list = new Array();
    for (var i = 0; i < list.length; i++) {
        if (test(list[i])) result_list.push(list[i]);
    }
    return result_list;
}
 

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

清单 10. 使用函数式实用工具
// A list of all the element names in document order
function isElement(node) {
    return node.nodeType == Node.ELEMENT_NODE;
}
function nodeName(node) {
    return node.nodeName;
}
var elementNames = map(filter(listNodes(document),isElement), nodeName);
// All the text from the document (ignores CDATA)
function isText(node) {
    return node.nodeType == Node.TEXT_NODE;
}
function nodeValue(node) {
    return node.nodeValue;
}
var allText = map(filter(listNodes(document), isText), nodeValue);
 

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

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

    DOM 其实不是10分安全的工具 —— 特别是使用 DOM API 创建不能作为 XML 序列化的树时。尽对不要在同1个程序中混合使用 DOM1 非名称空间 API 和 DOM2 名称空间感知的 API（例如，createElement 和 createElementNS）。假设您使用名称空间，请尽可能在根元素位置声明所着名称空间，并且不要覆盖名称空间前缀，否则情况会非常混乱。1般来讲，只要依照惯例，就不会触发使您陷进麻烦的临界情况。

    假设您1直使用 Internet Explorer 的 innerText 和 innerHTML 进行解析，那末您可以试试使用 elem() 函数。通过构建类似的1些实用工具，您会得到更多便利，并且继续了跨平台代码的优越性。将这两种方法混合使用是非常糟的。

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

    结束语
    我已先容了 DOM 能做的很多事情，但是 DOM（和 JavaScript）可以做的事情远不止这些。仔细研究、揣摩这些例子，看看是如何使用它们来解决可能需要客户端脚本、模板或专用 API 的题目。

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

评论加载中... 内容： 评论者： 验证码：