知识林
当前位置:知识林 » 网站前端开发 » HTML_DOM » 使用TreeWalker遍历DOM文档

使用TreeWalker遍历DOM文档

来源: 知识林

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

createTreeWalker四个参数意义如下

属性说明
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.createTreeWalker(document, NodeFilter.SHOW_ALL, null, false
TreeWalker有点向NodeIterator的大哥一样:它有NodeIterator所有的功能,并且添加了下面一些遍历方法:
parentNode():进入当前节点的父节点;
firstChild():进入当前节点的第一子节点;
lastChild():进入当前节点的最后一个子节点
nextSibling():进入当前节点的下一个兄弟节点
previousSibling():进入当前节点的前一个兄弟节点
要开始使用TreeWalker,其实完全可以向使用NodeIterator一样,只需要将createNodeIterator()改成createTreeWalker()即可,这个函数接收同样的参数:

Having created a filtered list of nodes using document.createTreeWalker(), you can then process these filtered nodes using TreeWalker's traversal methods:

TreeWalker traversal methods
Method Description
firstChild() Travels to and returns the first child of the current node.
lastChild() Travels to and returns the last child of the current node.
nextNode() Travels to and returns the next node within the filtered collection of nodes.
nextSibling() Travels to and returns the next sibling of the current node.
parentNode() Travels to and returns the current node's parent node.
previousNode() Travels to and returns the previous node of the current node.
previousSibling() Travels to and returns the previous sibling of the current node.
TreeWalker traversal properties
Property Description
currentNode Returns the current position/ node of TreeWalker. Read/write, allowing you to explicitly set the current position of TreeWalker to a particular node within the nodes returned.
<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.createTreeWalker(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>

也可以使用TreeWalker特有的方法来准确的定位DOM文档的某一个节点:如获取<LI>节点

<html>
<head>
    
<title>dom中的NodeIterator对象示例</title>
    
<script>
        
function makelist() {
            
var oDiv = document.getElementById("div1");
            
var oFilter = new Object;
            oFilter.acceptNode = 
function (oNode) {
                
return (oNode.tagName == "P") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
            };
            
var walker = document.createTreeWalker(oDiv, NodeFilter.SHOW_ELEMENT, oFilter, false);
            
var oOutput = document.getElementById("text1");
            
var oP = walker.firstChild(); //go to <p>
            
var oUl = walker.nextSibling(); // go to <ul>
            
var oLi = walker.firstChild();  //go to <li>
            
while (oLi) {
                oOutput.value += oLi.tagName + 
"\n";
                oLi = walker.nextSibling();
            }
        }
    
</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