遍歷

“DOM2級遍歷和範圍” 定義了兩個用於輔助完成順序遍歷的DOM結構類型

NodeIterator 和 TreeWalk

上述兩種類型可以基於給定起點的DOM結構執行深度優先的遍歷操作

對於檢測瀏覽器對於該功能的實現可以使用以下代碼

var supportTraversals = document.implementation.hasFeature("Traversal","2.0");

var supportsNodeIterator = (typeof document.createNodeIterator === "function");

var supportsTreeWalker = (typeof
 
 document.createTreeWalker === "function");

所謂深度優先，也就是對於樹的深度優先遍歷，即先一層一層往子節點深入，深入到最深層次的子節點後才返回上一層進行相同的遍歷操作

其遍歷順序如上所示

NodeIterator

NodeIterator類型是兩者中較為簡單的那個

該類型可以使用 document.createNodeIterator() 方法創建

該方法接收以下四個參數

1. root：作為搜索起點的節點
2. whatToShow：要訪問節點的數字代碼
   • 這些值以常量的形式定義在 NodeFilter 類型
   • NodeFilter.SHOW_ALL：顯示所有類型的節點
   • NodeFilter.SHOW_ELEMENT：顯示元素節點
   • NodeFilter.SHOW_ATTRIBUTE：顯示特性節點（由於DOM結構的原因在實際使用時並不能使用該值）
   • NodeFilter.SHOW_TEXT：顯示文本節點
   • NodeFilter.SHOW_CDATA_SETCTION：顯示CDATA節點對HTML頁面沒有作用
   • NodeFilter.SHOW_ENTITY_REFERENCE：顯示實體引用節點，對HTML頁面不起作用
   • NodeFilter.SHOW_ENTITY：顯示實體節點，對HTML頁面不起作用
   • NodeFilter.SHOW_PROCESSING_INSTRUCTION：顯示指令處理節點對HTML頁面不起作用
   • NodeFilter.SHOW_COMMENT：顯示註釋節點
   • NodeFilter.SHOW_DOCUMENT：顯示文檔節點
   • NodeFilter.SHOW_DOCUMENT_TYPE：顯示文檔類型節點
   • NodeFilter.SHOW_DOCUMENT_FRAGMENT：顯示文檔片段節點，對HTML頁面無效
   • NodeFilter.SHOW_NOTATION：顯示符號節點
   • 以上常量可以使用位操作符來組合（除SHOW_ALL外），如 NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT
3. filter：一個Node Filter對象，或一個表示接受或拒絕節點的函數
   1. NodeFilter對象：

      var filter = {
          acceptNode:function(node){
              return node.tagName.toLowerCase() === "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
          }
      }

   2. 函數：

      var filter = function(node){
              return node.tagName.toLowerCase() === "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
      }

      　　
4. entityReferenceExpansion：布爾值，是否拓展實體引用，HTML中不起作用，因為其中的實體不能拓展

·

若希望使用該類型遍歷文檔中的元素最主要的兩個方法就是 nextNode（） 和 previousNode（） 用於實現遍歷的上一步和下一步，返回一個指向當前遍歷節點的指針，若已經遍歷完成回到起始節點則返回null

var div = document.getElementById("div1");
var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node = iterator.nextNode();
while(node !=== null){
    alert(node.tagName);
    node = iterator.nextNode();
}

可使用上方代碼遍歷下方的文檔

<div id ="div1">
    <p><b>hello</b>World!</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    <ul>
</div>

TreeWalker

TreeWalker是NodeIterator 的高級版本

其創建方式和 NodeIterator 一致

除了 NodeIterator 所擁有的 nextNode、previousNode之外

TreeWalker還擁有以下方法

• parent Node（）：得到當前節點的父節點
• first Child（）：得到當前節點的第一個子節點
• last Child（）：當前節點的最後一個子節點
• nextSibling（）：當前節點的下一個同輩節點
• previousSibling（）：當前節點的上一個同輩節點

其構建方法為： document.createTreeWalker()

還有一點不同在於 TreeWaler 可以使用 NodeFilter.FILTER_REJECT

其與 Node FIlter.FILTER_SKIP 的區別在於 SKIP 只會跳過當前節點，而REJECT會跳過當前節點及其子樹

除此而外 TreeWalk 還有一個 currentNode 屬性可以修改起始節點

關於遍歷部分需要註意的是IE似乎並沒有類似的遍歷節點的解決方案，所以跨瀏覽器的遍歷方法十分少見

Javascript高級編程學習筆記（53）—— DOM2和DOM3（5）遍歷