js--DOM2--元素遍历

1.DOM2 级遍历?

DOM2 级遍历DOM结构的类型：NodeIterator和TreeWalker，两者都是深度优先的DOM结构遍历

1.NodeIterator–较简单

使用document.createNodeIterator()方法创建NodeIterator的新实例，可以接收的4个参数，创建的NodeIterator的新实例中一个内部指针指向根节点

1.root  作为搜索起点的树中的节点

2.whatToShow  想访问那些树中的节点(NodeFilter.SHOW_ELEMENT,NodeFilter.SHOW_ALL,NodeFilter.SHOW_ATTRIBUTE等)

3.filter 是一个NodeFilter对象，或者一个表示应该接收还是拒绝某种特定节点的函数

4.entityReferenceExpansion 布尔值，表示是否要扩展实体引用

NodeIterator类型的两个主要方法:nextNode()，previousNode()

//讲解第三个参数filter，filter对象只是一个方法就是acceptNode()，若该访问此节点，则返回NodeFilter.FILTER_ACCEPT,否则返回NodeFilter.FILTER_SKIP

var filter = {
    acceptNode: function(node) {
        return node.tagName.toLowerCase() == "p" ?
               NodeFilter.FILTER_ACCEPT:
               NodeFilter.FILTER_SKIP;
    }
}
var iterator = document.createNodeIterator(document,NodeFilter.SHOW_ELEMENT,filter,false);

//下面讲解此遍历函数NodeIterator的使用
//HTML代码
<div id="div1">
    <p><b></b></p>
</div>

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

//js代码遍历div下的所有元素节点
var div = document.getElementById("div1"),
    iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false),----创建的NodeIterator的新实例中一个内部指针指向根节点div
    node = iterator.nextNode();

while(node != null) {
    alert(node.tagName);
    node = iterator.nextNode;
}

//输出 DIV P B UL LI LI LI

//若执行返回li标签
var filter = function(node) {
    return node.tagName.toLowerCase() == "li"?
           NodeFilter.FILTER_ACCEPT:
           NodeFilter.FILTER_SKIP;
}
var div = document.getElementById("div1"),
    iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,filter,false),----创建的NodeIterator的新实例中一个内部指针指向根节点div
    node = iterator.nextNode();

while(node != null) {
    alert(node.tagName);
    node = iterator.nextNode();
}

2.TreeWalker–是NodeIterator的另一个更高级的版本

除了NodeIterator的nextNode()和previousNode()的功能外，还有其他方向上遍历DOM结构的方法

pareentNode(),firstChild(),lastChild(),nextSibling(),previousSibling()

使用document.createTreeWalker()方法创建TreeWalker的新实例，可以接收的4个参数(和NodeIterator一致)，创建的TreeWalker的新实例中一个内部指针指向根节点

1.root  作为搜索起点的树中的节点

2.whatToShow  想访问那些树中的节点(NodeFilter.SHOW_ELEMENT,NodeFilter.SHOW_ALL,NodeFilter.SHOW_ATTRIBUTE等)

3.filter 是一个NodeFilter对象，或者一个表示应该接收还是拒绝某种特定节点的函数---区别：这里返回值是NodeFilter.FILTER_ACCEPT,NodeFilter.FILTER_SKIP,NodeFilter.FILTER_REJECT;

NodeFilter.FILTER_SKIP----跳出相应节点继续前进到子树的下一个节点
NodeFilter.FILTER_REJECT--跳出相应的节点和节点的整个子树

4.entityReferenceExpansion 布尔值，表示是否要扩展实体引用

//下面讲解此遍历函数TreeWalker的使用
//HTML代码
<div id="div1">
    <p><b></b></p>
</div>

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

//js代码遍历div下的所有元素节点
var div = document.getElementById("div1"),
    walker = document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false;

walker.firstChild(); //转到<p>
walker.nextSibling();//转到<ul>

var node = walker.firstChild();//转到第一个<li>

while(node != null) {
    alert(node.tagName);
    node = walker.nextSibling();
}