DOM遍歷

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; //修改起點

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章