代码改变世界

DOM2级遍历和范围----NodeIterator

2012-08-05 14:03  @影子@  阅读(237)  评论(0)  编辑  收藏  举报

可以用document对象的createNodeIterator()方法来创建NodeIterator对象，基本形式如下：
var iterator=document.createNodeIterator(root,whatToShow,filter,entityReferanceExpansion);

用到的四个参数的意义如下：

root: 从树的哪个节点开始搜索
whatToShow: 一个数值代码，代表哪些节点需要搜索
filter: NodeFilter对象，用来决定需要忽略哪些节点
entityReferanceExpansion：布尔值，表示需要扩展的实体引用

whatToShow 的参数可以有以下取值
SHOW_ALL:显示所有元素节点
SHOW_ELLEMENT:显示元素节点
SHOW_ATRRIBUTE:显示特性节点
SHOW_TEXT:显示文本节点
SHOW_ENTITY_REFERENCE:
SHOW_ENTITY:
SHOW_PROCESSING_INSTRUCTION:
SHOW_COMMENT:显示注释节点
SHOW_DOCUMENT:显示文档节点
SHOW_DOCUMENT_TYPE:显示文档类型节点
SHOW_DOCUMENT_FRAGMENT:
SHOW_NOTATION:

可使用二进制操作来组合多个值
var whattoshow = NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT;

常用的有按位或运算"|"和按位取补运算"~"

filter参数可以指定一个自定义的NodeFilter对象，但如果不想使用它的话，也可以留空；

要创建最简单的访问所有节点的NodeFilter对象，可以使用以下代码

var iterator = document.createNodeIterator(document,NodeFilter.SHOW_ALL,null,false);

要在搜索过程中前进或者后退，可以使用nextNode()和previousNode()

 

例如，想列出某个区域内指定<div />中包含的所有元素。下列代码可以完成这个任务：

<html>
<head>
<title>dom中的NodeIterator对象示例</title>
<script>
function makelist()
{
   var divnode = document.getElementById("div1");
   
   var iterator = document.createNodeIterator(divnode, NodeFilter.SHOW_ELEMENT, null, false);
   var oput = document.getElementById("textarea1");
   var node = iterator.nextNode();
   while(node)
   {
      oput.value += node.TagName +"\n";
      node = iterator.nextNode();
   }
}
</script>
</head>
<body>
<div id="div1">
   <p>你好<b>读者!</b></p>
   <ul>
      <li>列表项一</li>
      <li>列表项二</li>
      <li>列表项三</li>
      <li>列表项四</li>
   </ul>
</div>
<textarea id="textarea1" rows="10"></textarea><br />
<input type="button" value="生成列表" onclick="makelist()" />
</body>
</html>

但假设不想在结果中包含<p />元素。这就不能公用whatToShow参数来完成。这种情况下，就要用到filter参数，而filter参数需要自定义一个NodeFilter对象，该对象只有一个方法acceptNode()。如果应该访问给定的节点，那么该方法返回NodeFilter.FILTER_ACCEPT;如果不应该访问该节点并且其子节点也没兴趣，则返回NodeFilter.FILTER_REJECT;如果不应该访问该节点但仍对其子节点有兴趣，则返回NodeFilter.FILTER_SKIP。代码如下：

<html>
<head>
<title>dom中的NodeIterator对象示例</title>
<script>
function makelist()
{
   var divnode = document.getElementById("div1");
   var filter = new Object();
   filter.acceptNode = function(node)
   {
      return (node.TagName == "P") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
   }
   var iterator = document.createNodeIterator(divnode, NodeFilter.SHOW_ELEMENT, filter, false);
   var oput = document.getElementById("textarea1");
   var node = iterator.nextNode();
   while(node)
   {
      oput.value += node.TagName +"\n";
      node = iterator.nextNode();
   }
}
</script>
</head>
<body>
<div id="div1">
   <p>你好<b>读者!</b></p>
   <ul>
      <li>列表项一</li>
      <li>列表项二</li>
      <li>列表项三</li>
      <li>列表项四</li>
   </ul>
</div>
<textarea id="textarea1" rows="10"></textarea><br />
<input type="button" value="生成列表" onclick="makelist()" />
</body>
</html>