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();
}