DOM2級定義了兩個輔助完成遍歷DOM結構的類型:
NodeIterator和TreeWalker;// FF3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge
1. 創建NodeIterator實例:
document.createNodelterator();//4個參數
(1).root :想要作爲搜索起點的書中的節點
(2).whatToShow:表示要訪問哪些節點的數字代碼
(3).filter:是一個NodeFilter對象,或者一個表示應該接受還是拒絕的某種特定節點的函數。
(4).entityReferenceExpansion:一個布爾值,表示是否擴展實體應用,在HTML這個參數無用,設爲false.
注意:filter可以指定自定義的NodeFilter對象,或者一個過濾器函數 。NodeFilter對象的方法acceptNode(),如果訪問節點則返回NodeFilter.FILTER_ACCEPT,
否則返回NodeFilter.FILTER_SKIP
例:var filter={
acceptNode:function(node){
returnnode.tagName.toLowerCase()==’p’ ?
NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
}
};
NodeIterator的兩個方法:nextNode(),previousNode();
分別用於向前進一步,向後退一步
var iterator=document.createNodeIterator(root,NodeFilter.
SHOW_ELEMENT,filter,false);
varnode=iterator.nextNode();
while(node!==null){
alert(node.tagName);//輸出標籤名
node=iterator.nextNode();//每次都向前進一步
}
2. 創建一個TreeWalker新實例
document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,flter,false);
TreeWalker是前者更高級的版本,除了有nextNode(),previousNode()還有以下方法:
parentNode():遍歷到當前元素的父節點
firstChild(): 遍歷到當前節點的第一個子節點
lastChild():遍歷到當前節點的最後一個子節點
nextSibling(): 遍歷到當前節點的下一個同輩節點
previousSibling():遍歷到當前節點的上一個同輩節點
屬性:currentNode
表示任何遍歷方法在上一次遍歷中返回的節點,可以用來修改遍歷起點
var node=walker.nextNode();
alert(node==walker.currentNode); //true
walker.currentNode=document.body; //修改起點