淺談DOM遍歷
DOM的遍歷是深度優先的DOM結構遍歷,那麼什麼是深度優先遍歷。簡而言之,首先訪問出發點v,對縱深方向搜尋。詳細請百度。
在“DOM2級遍歷和範圍”模組中,定義了兩種用於遍歷DOM結構的型別:NodeIterator和TreeWalker ,這兩個屬性在IE8以上支援,火狐1及更高版本、Safari1.3及更高版本,Opera7.6及更高版本,谷歌0.2及更高版本支援。
NodeIterator:
使用NodeIterator前要使用docume.createNodeIterator()方法建立他的例項。docume.createNodeIterator()方法接受4個引數(必寫)。分別是:
root:想要作為搜尋起點的樹中的節點。
whatToShow: 表示要訪問那些節點的數字程式碼。
filter:是一個NodeFilter物件,或者一個表示應該接受還是拒絕的某種特定節點的函式。
entityReferenceExpansion:一個布林值,表示是否擴充套件實體應用,在HTML這個引數無用,設為false.
解釋filter:
通過filter引數可以指定自定義NodeFilter物件,或者指定一個功能類似的節點過濾器的函式。每個NodeFilter物件只有一個辦法,即accept-Node(); 如果應該訪問給定節點,該方法返回NodeFilter.FILTER_ACCEPT,如果不應該訪問給定節點,該方法返回NodeFilter.FILTER_SKIP。因為NodeFilter()是一個抽象的型別。所以不能直接建立例項,可以建立一個包含acceptNode()的方法的物件,然後將這個物件傳入creatNodeItreator()中。
nodeIterator還有兩個方法nextNode()和previousNode()。nextNode()表示在當前遍歷的DOM樹中,在指定的節點基礎上搜索下一個節點。previousNode()表示向上搜尋一個節點。當遍歷到最後一個節點,nextNode()會返回null。
程式碼演示:
HTML程式碼片段
<div>
<ul/>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
</ul>
</div>
javascript程式碼:var oDiv = document.getElementsByTagName('div')[0];
var filter = {
acceptNode: function(node) {
return node.tagName.toLowerCase() == 'p'?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
}
}//建立NodeFilter例項(該例項實現直線<p>元素的節點迭代器)
var oIterator = document.createNodeIterator(oDiv,NodeFilter.SHOW_ELEMENT,filter,false);
var oNode = oIterator.nextNode();
while(oNode!==null) {
oNode = oIterator.nextNode();
document.write(oNode.tagName+" ");
}
結果:
如果第三個引數為null,即
var oIterator = document.createNodeIterator(oDiv,NodeFilter.SHOW_ELEMENT,null,false);
結果
TreeWalker:與NodeIterator使用方法相同,所以很容易用TreeWalker替代NodeIterator
與NodeIterator不同的是,treeWalk提供了用於在不同方向上遍歷DOM結果的方法。
parentNode():遍歷到當前節點的父節點。
firstChild():遍歷到當前節點的第一個子節點。
lastChild():遍歷到當前節點的最後一個子節點。
nextSibling():遍歷到當前節點的下個同輩節點。
previousSibling():遍歷到當前節點的上一個同輩節點程式碼:
var oDiv = document.getElementsByTagName('div')[0];
var filter = {
acceptNode: function(node) {
return node.tagName.toLowerCase() == 'p'?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
}
}
var oWalk = document.createTreeWalker(oDiv,NodeFilter.SHOW_ELEMENT,filter,false);
var oNode = oWalk.nextNode();
while(oNode!==null) {
oNode = oWalk.nextNode();
document.write(oNode.tagName+" ");
}
結果如果第三個引數為null,即:
ar oWalk = document.createTreeWalker(oDiv,NodeFilter.SHOW_ELEMENT,null,false);
結果:
不會返回根節點。