知识林
当前位置:知识林 » 网站前端开发 » HTML_DOM » Introduction to the NodeIterator object of DOM

Introduction to the NodeIterator object of DOM

来源: 知识林

document对象的createNodeIterator()方法来创建NodeIterator对象,基本形式如下:
var iterator = document.createNodeIterator(root, whatToShow, filter,entityReferenceExpansion);

createNodeIterator 四个参数意义如下

属性说明
root从树中的哪个节点开始搜索。
whatToShow一个数值代码,代表哪些节点需要搜索。
filterNodeFilter对象,用来决定需要忽略哪些节点。
entityReferenceExpansion布尔值,表示是否需要扩展实体引用。

whatToShow参数可以有下列这些常量或其组合的取值

属性说明
NodeFilter.SHOW_ALL搜索所有节点
NodeFilter.SHOW_ELEMENT搜索元素节点
NodeFilter.SHOW_ATRRIBUTE搜索特性节点
NodeFilter.SHOW_TEXT搜索文本节点
NodeFilter.SHOW_ENTITY_REFERENCE搜索实体引用节点
NodeFilter.SHOW_ENTITY搜索实体节点
NodeFilter.SHOW_PROCESSING_INSTRUCTION搜索PI节
NodeFilter.SHOW_COMMENT搜索注释节点
NodeFilter.SHOW_DOCUMENT搜索文档节点
NodeFilter.SHOW_DOCUMENT_TYPE搜索文档类型节点
NodeFilter.SHOW_DOCUMENT_FRAGMENT搜索文档碎片节节
NodeFilter.SHOW_NOTATION搜索记号节点
可以使用二进制操作来组合多个值:
var whattoshow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
常用的有按位或运算符"|"和按位取补运算符"~";
filter参数可以指定一个自定义的NodeFilter对象,但如果不想使用它的话,也可以留空(null);
要创建最简单的访问所有节点的NodeIterator对象,可以使用下面的代码:
var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL, null, false
要在搜索过程中前进或者后退,可以使用nextNode()和previousNode()方法:
var node1 = iterator.nextNode();
var node2 = iterator.nextNode();
var node3 = iterator.previousNode();
alert(node1 == node3);输出结果为“true”;

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

<html>
<head>
<title>dom中的NodeIterator对象示例</title>
<script>
    
function makelist() {
        
var divnode = document.getElementById("div1");

        
var iterator = document.createNodeIterator(divnode, NodeFilter.SHOW_ELEMENT, nullfalse);
        
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> 

但假设不想在结果中包含

元素。这就不能公用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="div2">
        
<p>你好<b>读者!</b></p>
        
<ul>
            
<li>列表项一</li>
            
<li>列表项二</li>
            
<li>列表项三</li>
            
<li>列表项四</li>
        
</ul>
    
</div>
    
<textarea id="textarea2" rows="10"></textarea><br />
    
<input type="button" value="生成列表" onclick="makelist()" />
</body>
</html>

今天

Copyright © 知识林 All Rights Reserved.   吉ICP备13001611号-1