HTML DOM createNodeIterator() 方法

简介

createNodeIterator() 是一个HTML DOM方法，用于创建一个可以迭代节点的对象，返回的是 NodeIterator 对象。该方法提供了比遍历 DOM 树更高级的功能，可以通过设置过滤规则等参数，更灵活地遍历 DOM 节点。

语法

document.createNodeIterator(root, whatToShow, filter)

root：要遍历的根节点
whatToShow：指定要显示哪些节点，取值为数字，可用 NodeFilter 对象的常量来设置
filter：一个 NodeFilter 对象，用于指定规则，只有符合条件的节点才会被遍历

示例

// 遍历 id 为 "example" 节点下的所有元素节点（不包括属性节点）
const nodeIterator = document.createNodeIterator(
  document.getElementById("example"),
  NodeFilter.SHOW_ELEMENT,
  {
    acceptNode: function(node) {
      if (node.nodeType === Node.ELEMENT_NODE) {
        return NodeFilter.FILTER_ACCEPT;
      }
      return NodeFilter.FILTER_SKIP;
    }
  }
);
let currentNode = nodeIterator.nextNode();
while(currentNode !== null) {
  console.log(currentNode.tagName);
  currentNode = nodeIterator.nextNode();
}

参数说明

whatToShow

常量含义：

• NodeFilter.SHOW_ALL：遍历所有节点，包括元素、属性、文本等
• NodeFilter.SHOW_ELEMENT：只遍历元素节点
• NodeFilter.SHOW_ATTRIBUTE：只遍历属性节点
• NodeFilter.SHOW_TEXT：只遍历文本节点
• NodeFilter.SHOW_CDATA_SECTION：只遍历 CDATA 节点
• NodeFilter.SHOW_ENTITY_REFERENCE：只遍历实体节点
• NodeFilter.SHOW_ENTITY：只遍历实体引用节点
• NodeFilter.SHOW_PROCESSING_INSTRUCTION：只遍历处理指令节点
• NodeFilter.SHOW_COMMENT：只遍历注释节点
• NodeFilter.SHOW_DOCUMENT：只遍历文档节点
• NodeFilter.SHOW_DOCUMENT_TYPE：只遍历文档类型节点
• NodeFilter.SHOW_DOCUMENT_FRAGMENT：只遍历文档片段节点

filter

filter 参数是一个对象，它必须包含一个方法 acceptNode()，该方法有一个参数 node，返回值为以下三个常量之一：

• NodeFilter.FILTER_ACCEPT：接受节点，并且在遍历中返回它
• NodeFilter.FILTER_REJECT：拒绝节点，并且在遍历中不返回它
• NodeFilter.FILTER_SKIP：跳过该节点，但不影响后面的遍历

注意事项

需要注意的是，createNodeIterator() 方法返回的是一个遍历器，必须通过 nextNode() 方法来逐一迭代节点。

此外，在使用 NodeFilter 时，要注意不同浏览器对 NodeFilter API 的实现不尽相同。在使用时，最好检查一下浏览器是否支持该 API，并在程序中做好兼容处理。