1、NodeIterator
按照深度優先的順序，依次遍歷每個節點對象
深度優先: 優先遍歷一個節點的下級節點，只有下級節點遍歷完，才遍歷兄弟節點
如何使用: 2步:
1、創建NodeIterator對象:
var iterator = document.createNodeIterator(
root, whatToShow, filter,entityReferenceExpansion);
iterator就站在開始父節點上
用到的四個參數意義如下：
1、root:從樹中的哪個節點開始搜索；
2、whatToShow:一個數值代碼，代表哪些節點需要搜索；
3、filter:NodeFilter對象，用來決定需要忽略哪些節點，不想使用它的話，可以留空（null）；
4、entityReferenceExpansion:布爾值，表示是否需要擴展實體引用；
whatToShow參數可以有下列這些常量或其組合的取值：
1、NodeFilter.SHOW_ALL：搜索所有節點；
2、NodeFilter.SHOW_ELEMENT：搜索元素節點；
3、NodeFilter.SHOW_ATRRIBUTE：搜索特性節點；
4、NodeFilter.SHOW_TEXT：搜索文本節點；
5、NodeFilter.SHOW_ENTITY_REFERENCE：搜索實體引用節點；
6、NodeFilter.SHOW_ENTITY：搜索實體節點；
7、NodeFilter.SHOW_PROCESSING_INSTRUCTION：搜索PI節；
8、NodeFilter.SHOW_COMMENT：搜索註釋節點；
9、NodeFilter.SHOW_DOCUMENT：搜索文檔節點；
10、NodeFilter.SHOW_DOCUMENT_TYPE：搜索文檔類型節點；
11、NodeFilter.SHOW_DOCUMENT_FRAGMENT：搜索文檔碎片節節；
12、NodeFilter.SHOW_NOTATION：搜索記號節點；
最簡單的訪問所有節點的NodeIterator對象，可以使用下面的代碼：
var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL, null, false);
2、循環調用iterator，遍歷每個節點對象
返回當前節點,然後跳到下一個節點
var currNode=iterator.nextNode()
倒退一步,返回當前節點
var prevNode=iterator.previousNode()
循環條用
while((node=iterator.nextNode())!=null){
node//當前節點
}
2、TreeWalker
可選擇跳轉方向的迭代器，基本功能和NodeIterator完全一樣
相同: 開始時都站在開始父元素上
不同: 添加了下面一些遍歷方法
parentNode(): 跳到父節點
firstChild(): 跳到第一個子節點
lastChild(): 跳到最後一個子節點
previousSibling(): 跳到前一個兄弟節點
nextSibling(): 跳到後一個兄弟節點
<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>TreeWalker!</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>
