原生js之-Document.createNodeIterator()

Document.createNodeIterator()

返回一個新的 NodeIterator對象。

語法

const nodeIterator = document.createNodeIterator(root[, whatToShow[, filter]]);

參數

root

NodeIterator遍歷起始處的根節點。

whatToShow可選

常量	數字值	描述
NodeFilter.SHOW_ALL	-1 (即unsigned long 的最大值)	顯示所有節點。
NodeFilter.SHOW_ATTRIBUTE	2	顯示 Attr 特性節點。這僅在創建以Attr 特性節點爲根節點的TreeWalker時有意義；在這種情況下，這意味着該特性節點會出現在迭代或遍歷的第一位。因爲特性節點不會是其他節點的子代，遍歷文檔樹時，特性節點不會出現。
NodeFilter.SHOW_CDATA_SECTION	8	顯示 CDATASection 節點。
NodeFilter.SHOW_COMMENT	128	顯示 Comment 節點。
NodeFilter.SHOW_DOCUMENT	256	顯示 Document 節點。
NodeFilter.SHOW_DOCUMENT_FRAGMENT	1024	顯示 DocumentFragment 節點。
NodeFilter.SHOW_DOCUMENT_TYPE	512	顯示 DocumentType 節點。
NodeFilter.SHOW_ELEMENT	1	顯示 Element 節點。
NodeFilter.SHOW_ENTITY	32	顯示 Entity 節點。 這僅在創建以Entity實體節點爲根節點的TreeWalker時有意義；在這種情況下，這意味着該實體節點會出現在迭代或遍歷的第一位。因爲實體節點不會是其他節點的子代，遍歷文檔樹時，實體節點不會出現。
NodeFilter.SHOW_ENTITY_REFERENCE	16	顯示 EntityReference 節點。
NodeFilter.SHOW_NOTATION	2048	顯示 Entity 節點。 這僅在創建以Notation符號節點爲根節點的TreeWalker時有意義；在這種情況下，這意味着該符號節點會出現在迭代或遍歷的第一位。因爲符號節點不會是其他節點的子代，遍歷文檔樹時，符號節點不會出現。
NodeFilter.SHOW_PROCESSING_INSTRUCTION	64	顯示 ProcessingInstruction (en-US) 節點。
NodeFilter.SHOW_TEXT	4	顯示 Text 節點。

filter可選

是實現 NodeFilter接口的對象; 其 acceptNode() 方法會對從根節點開始到子樹中的每個節點都調用一次，哪些節點需要進入迭代節點列表等待調用則取決於whatToShow參數（也可以使用一個簡單的回調函數代替acceptNode()）。該方法需要返回下列常量之一： NodeFilter.FILTER_ACCEPT ，NodeFilter.FILTER_REJECT或NodeFilter.FILTER_SKIP（見NodeFilter），參見示例。

**注意： **在Gecko12.0(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9)以前，這個方法接收第四個可選的參數（entityReferenceExpansion），這不是DOM4 規範中的一部分，因此被移除了。這個參數表示實體引用節點的子代對於迭代器是否可見。因爲瀏覽器不會創建這樣的節點，這個參數沒有任何作用。

示例

const nodeIterator = document.createNodeIterator(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    {
      acceptNode(node) {
        return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
      }
    }
);
const pars = [];
let currentNode;

while (currentNode = nodeIterator.nextNode()) {
  pars.push(currentNode);
}

兼容性

總結

改方法兼容性還是不錯的，如果說你要是需要遍歷整個dom節點來做些什麼這個是個不錯的選擇，可能比以前遞歸循環判斷要好很多。