javascript DOM 之createTreeWalker 搜索优化_H5之家 - 中国HTML5教程资源分享第一站

javascript DOM Level 2 之createTreeWalker 深度搜索节点

注意：createTreeWalker和createNodeIterator都不支持IE6

function makelist(id,showid)
{
var oDiv = document.getElementById(id);
var oFilter = new Object;
oFilter.acceptNode = function (oNode)
{
 
//用于过滤禁止的tagName
return (oNode.tagName == "P" ) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT ;
};
walker = document.createTreeWalker(oDiv,NodeFilter.SHOW_ELEMENT,oFilter,false);
var output = document.getElementById(showid);
var oNode = walker.nextNode();
var str='',innerTextStr='';
while(oNode)
{
 
innerTextStr = (oNode.innerText)? oNode.innerText : oNode.textContent;
str += oNode.tagName+':'+innerTextStr+'\n';
oNode = walker.nextNode();
};
output.innerHTML=str;
 
}

<div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div>
 
<div id="list">
<p>hello <strong>word</strong></p>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
 
</ul>
 
</div>
<div id="showNode"></div>
<input type="button" onclick="makelist('list','showNode')" value="显示节点" />