zoukankan      html  css  js  c++  java
  • (转)Firefox 3.5中的DOM遍历

    原译文

    Firefox 3.5中包括了对两个W3C DOM遍历规范的支持。第一个是元素遍历API,用来使得遍历元素变得简单;第二个是NodeIterator(节点迭代器)接口,用来使得根据类型查找节点变得简单。

    元素遍历API

    元素遍历API的目的是使得开发人员可以很容易的遍历DOM元素,而不需要担心中间的文本节点、注释节点等。开发人员因为这个吃了很多苦头,比如document.documentElement.firstChild会根据文档中白字符的结构不同,而产生不同的结果。

    元素遍历API提供了一系列新的DOM节点属性,可以更加简单的进行遍历。下面列出来已有的DOM节点属性和对应的新属性:

    作用所有DOM节点仅元素节点
    第一个.firstChild.firstElementChild
    最后一个.lastChild.lastElementChild
    前一个.previousSibling.previousElementSibling
    后一个.nextSibling.nextElementSibling
    长度.childNodes.length.childElementCount

    这些属性扩展了已有的DOM规范(而且,说实话,这些属性应该一早就出现在规范中的)。

    很明显有个属性被漏掉了:.childElements(与.childNodes对应)。这个属性(包含DOM元素中的所有子元素)在规范的某个版本中是存在的,后来被砍掉了。

    所幸的是,目前IE、Opera和Safari都支持一个.children的属性,它所提供的功能是.childElements的超集。在Firefox 3.5中支持元素遍历API的时候,这个属性.children也被包括在内。也就是说,所有主流的浏览器都支持这个属性了(比所有浏览器都支持元素遍历API中剩下的部分要早得多)。

    下面是一些元素遍历API和.children的示例:

    当点击的时候显示下一个元素:

    someElement.addEventListener("click", function(){
        this.nextSiblingElement.style.display = "block";
    }, false);
    

    为所有的子元素添加class:

    for ( var i = 0; i < someElement.children.length; i++ ) {
        someElement.children[i].className = "active";
    }
    

    NodeIterator API

    NodeIterator是一个相对比较老的API,但是一直没有被广泛采用。Firefox 3.5实现了这个API。NodeIterator API主要是设计用来方便的遍历DOM文档中的所有节点(包括文本节点和注释节点等)。

    这个API本身是比较绕的(包含很多对大多数开发人员来说都不重要的功能),但是如果你只是用来做一些简单的事情的话,还是比较容易的。

    使用API的时候,你需要创建一个NodeIterator(使用document.createNodeIterator),然后再把一系列的过滤器传进去。NodeIterator可以返回文档中的全部节点(或是给定节点的子节点),然后你就可以进行过滤,只显示你需要的节点。下面给出了一个简单的示例:

    构建一个NodeIterator用来迭代所有的注释节点。

    var nodeIterator = document.createNodeIterator(
        document,
        NodeFilter.SHOW_COMMENT,
        null,
        false
    );
     
    var node;
     
    while ( (node = nodeIterator.nextNode()) ) {
        node.parentNode.removeChild( node );
    }
    

    NodeIterator创建之后就可以进行双向迭代(你可以用previousNodenextNode来进行移动)。

    使用该API的最佳方式是遍历常用的节点,如注释和文本节点。由于已经有不少的API来进行DOM元素的遍历(如getElementsByTagName),NodeIterator API可以作为一般的节点遍历方式的良好补充。

  • 相关阅读:
    SIGGRAPH
    用JSP实现的商城购物车模块
    大数运算
    编写高质量代码改善java程序的151个建议——导航开篇
    Spring3.0 AOP 具体解释
    HDU3400+三分
    Java实现BFS广度优先查找
    Java实现BFS广度优先查找
    Java实现BFS广度优先查找
    Java实现BFS广度优先查找
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1593500.html
Copyright © 2011-2022 走看看