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

来源：互联网发布：阿里云二级域名端口编辑：程序博客网时间：2024/05/19 04:27

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

0 0