轻松使用DOM 的技巧和诀窍

作者:网络 来源:佚名 更新时间:2008-09-19 10:53:39 点击:
,欢迎访问网页设计爱好者web开发。

  dethe elza ([email protected]), 高级技术架构师, blast radius
 
  文档对象模型(document object model,dom)是用于操纵 xml 和 html 数据的最常用工具之一,然而它的潜力却很少被充分挖掘出来。通过利用 dom 的优势,并使它更加易用,您将获得一款应用于 xml 应用程序(包括动态 web 应用程序)的强大工具。

  本期文章介绍了一位客串的专栏作家,同时也是我的朋友和同事 dethe elza。dethe 在利用 xml 进行 web 应用程序开发方面经验丰富,在此,我要感谢他对我在介绍使用 dom 和 ecmascript 进行 xml 编程这一方面的帮助。

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

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

node1.parentnode.insertbefore(node2, node1);

node1.parentnode.insertbefore(node1.nextsibling, node1);

  还可以使用 dom 做什么?

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

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

  清单 3. 确保节点被定义

if (!window['node']) {
    window.node = new object();
    node.element_node = 1;
    node.attribute_node = 2;
    node.text_node = 3;
    node.cdata_section_node = 4;
    node.entity_reference_node = 5;
    node.entity_node = 6;
    node.processing_instruction_node = 7;
    node.comment_node = 8;
    node.document_node = 9;
    node.document_type_node = 10;
    node.document_fragment_node = 11;
    node.notation_node = 12;
}
 
  清单 4 展示如何提取包含在节点中的所有文本节点:

  清单 4. 内部文本

function innertext(node) {
    // is this a text or cdata node?
    if (node.nodetype == 3 || node.nodetype == 4) {
        return node.data;
    }
    var i;
    var returnvalue = [];
    for (i = 0; i < node.childnodes.length; i++) {
        returnvalue.push(innertext(node.childnodes[i]));
    }
    return returnvalue.join('');
}
 

  快捷方式

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

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

function handle_button() {
    var parent = document.getelementbyid('mycontainer');
    var div = document.createelement('div');
    div.classname = 'mydivcssclass';
    div.id = 'mydivid';
    div.style.position = 'absolute';
    div.style.left = '300px';
    div.style.top = '200px';
    var text = "this is the first text of the rest of this code";
    var textnode = document.createtextnode(text);
    div.appendchild(textnode);
    parent.appendchild(div);
}

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

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

function elem(name, attrs, style, text) {
    var e = document.createelement(name);
    if (attrs) {
        for (key in attrs) {
            if (key == 'class') {
                e.classname = attrs[key];
            } else if (key == 'id') {
                e.id = attrs[key];
            } else {
                e.setattribute(key, attrs[key]);
            }
        }
    }
    if (style) {
        for (key in style) {
            e.style[key] = style[key];
        }
    }
    if (text) {
        e.appendchild(document.createtextnode(text));
    }
    return e;
}
 
  使用该快捷方式,您能够以更加简洁的方法创建 清单 5 中的 <div> 元素。注意,attrs 和 style 参数是使用 javascript 文本对象而给出的。

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

function handle_button() {
    var parent = document.getelementbyid('mycontainer');
    parent.appendchild(elem('div',
      {class: 'mydivcssclass', id: 'mydivid'}
      {position: 'absolute', left: '300px', top: '200px'},
      'this is the first text of the rest of this code'));
}

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

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

  清单 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,在每个节点调用函数或从每个节点返回一个值。实际上,由于这些想法非常具有普遍性,所以 dom level 2 已经包含了一个称为 dom traversal and range 的扩展(为迭代 dom 所有节点定义了对象和 api),它用来为 dom 中的所有节点应用函数和在 dom 中选择一个范围。因为这些函数没有在 internet explorer 中定义(至少目前是这样),所以您可以使用 nextnode() 来做一些
类似的事情。

  在这里,我们的想法是创建一些简单、普通的工具,然后以不同的方式组装它们来达到预期的效果。如果您很熟悉函数式编程,这看起来会很亲切。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() 函数可以扩展到一个可选的长度,这与 array 的 slice() 方法效果类似,我把这个作为留给您的练习。另一个需要注意的是,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、修改样式、找到某种节点并移除,等等。一旦 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(例如,createelement 和 createelementns)。如果您使用名称空间,请尽量在根元素位置声明所有名称空间,并且不要覆盖名称空间前缀,否则情况会非常混乱。一般来说,只要按照惯例,就不会触发使您陷入麻烦的临界情况。

  如果您一直使用 internet explorer 的 innertext 和 innerhtml 进行解析,那么您可以试试使用 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 时时刻刻就在您的身边。使用这种被广泛部署的工具,绝对是您的明智之举。

  请作者联系本站,及时附注您的姓名。联系邮箱:edu#chinaz.com(把#改为@)。