您的位置：首页 > Web前端 > JavaScript

《JS高程（3）》DOM2和DOM3-遍历-第12章笔记(24)

2017-02-21 11:59 393 查看
“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型：
NodeIterator(迭代节点)
和
TreeWalker
；这两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作。

IE不支持DOM遍历，使用以下代码检测浏览器对DOM2级遍历能力的支持的情况：

var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");

var supportsNodeIterator = (typeof document.createNodeIterator == "function");

var supportsTreeWalker = (typeof document.createTreeWalker == "function");


DOM结构执行深度优先,说明移动方向至少有两个。遍历一给定节点为根，不可能向上超出DOM树的根节点。

以HTML页面为例：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<p><b>Hello</b>World</p>
</body>
</html>


DOM树:



以document为根节点的DOM树进行深度优先遍历的先后顺序。



NodeIterator

NodeIterator类型，可以使用
document.createNodeIterator()
方法创建新的实例，接受4个参数：

参数
root：想要作为搜索起点的树中的节点
whatToShow：表示要访问哪些节点的数字代码
filter：是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数
entityRefrenceExpansion：布尔值，表示是否要扩展实体引用。在HTML页面中没用，因为其中的实体引用不能扩展。
whatToShow参数是一个位掩码，通过应用一个或多个过滤器（filter）来确定访问哪些节点。这个参数的值以常量形式在NodeFilter类型中定义：

NodeFilter.SHOW_ALL：所有类型节点；

NodeFilter.SHOW_ELEMENT：元素；

NodeFilter.SHOW_ATTRIBUTE：特性；

NodeFilter.SHOW_TEXT：文本；

NodeFilter.SHOW_COMMENT;

NodeFilter.SHOW_DOCUMENT;

NodeFilter.SHOW_DOCUMENT_TYPE;


filter

可以使用createNodeIterator()方法的filter参数来指定自定义的NodeFilter对象，每个NodeFilter对象只有一个方法，应该访问的节点返回
NodeFilter.FILTER_ ACCEPT
;不应该访问的节点返回
NodeFilter.FILTER_SKIP
；

var filter = {acceptNode: function(){
return node.tageName.toLowerCase() == "p"?
NodeFilter.FILTER_ACCEPT:
NodeFilter.FILTER_SKIP;
}
};

var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, filter, false);


第三个函数也可以是一个与acceptNode()方法类似的函数：

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


如果不指定过滤器，在第三个参数出传入null。

NodeIterator类型的两个主要方法nextNode()和previousNode()。

nextNode()方法用于向前前进一步，第一调用时会返回根节点，遍历到最后一个节点时，返回null；

previousNode()方法用于后退一步，遍历到最后一个节点时，返回根节点，再次调用返回null。

以下面HTML为例：

<div id="div1">
<p><b>Hello</b>world!</p>
<ul>
<li>List item1</li>
<li>List item2</li>
<li>List item3</li>
</ul>
</div>


遍历所有
<div>
元素：

var div = document.getElementById("div1");
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false);
var node = iterator.nextNode();
while(node !== null){
// DIV P B UL LI LI LI LI
alert(node.tagName);
node = iterator.nextNode()；
}


只返回
<li>
元素：

var div = document.getElementById("div1");
var filter = function(node){
return node.tagName.toLowerCaxe() == "li"?
NodeFilter.FILTER_ACCEPT:
NodeFilter.FILTER_ACCEPT;
};

var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false);

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


TreeWalker

TreeWalker是NodeIterator的一个更高级的版本，除了nextNode()和previousNode()在内的相同的功能之外，还提供了其他遍历DOM结构的方法。

方法
parentNode()：遍历到当前节点的父节点；
firstChild()：遍历当前节点的第一个子节点；
lastChild()：遍历当前节点的最后一个子节点；
nextSibling()：遍历当前节点的下一个同辈节点；
previousSibling()：遍历当前节点的上一个同辈节点；
创建 TreeWalker对象方法：document.createTreeWalker()；

参数：4个；

var div = document.getElementById("div1");
var filter = function(node){
return node.tagName.toLowerCase() == "li";?
NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
}

var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, filter, false);

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


TreeWalker真正强大的地方在于能够在DOM结构中沿任何方向移动，即使不使用过滤器也可以得到想要的元素：

var div = document.getElementById("div1");
var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);

walker.firstChild();
walker.nextSibling();

var node = walker.firstChild();
while (node !== null){
alert(node.tagName);
node = walker.nextSilbling();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  遍历 dom 迭代
相关文章推荐
新的分享
章节导航