DOM 遍历是对 DOM 结构的深度优先遍历，至少允许朝两个方向移动（取决于类型）。遍历以给定节点为根，不能在 DOM 中向上超越这个根节点。以 document 为根节点的遍历，则可以访问到文档中的所有节点，以 document 为根节点的深度优先遍历。
image.png
NodeIterator 和 TreeWalker 都以这种方式进行遍历。

NodeIterator

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createNodeIterator

创建

通过 document.createNodeIterator(root, whatToShow, filter) 方法创建实例
参数

  • root 作为遍历根节点的节点
  • whatToShow 数值代码，表示应该访问哪些节点
    • NodeFilter.SHOW_ALL 所有节点
    • NodeFilter.SHOW_ELEMENT，元素节点。
    • NodeFilter.SHOW_ATTRIBUTE，属性节点。由于 DOM 的结构，因此实际上用不上。
    • NodeFilter.SHOW_TEXT，文本节点。
    • NodeFilter.SHOW_CDATA_SECTION，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，记号节点。不是在 HTML 页面中使用的。

  • filter NodeFilter 对象或函数，表示是否接收或路过特定节点

    • 包含acceptNode()的对象
      • { acceptNode(node){ return NodeFilter.Filter_ACCEPT } }
    • acceptNode()形式一样的函数
      • acceptNode(node){ return NodeFilter.Filter_ACCEPT }

        遍历

  • nextNode()

    • 以深度优先方式前进一步
    • 返回
      • 第一次调用返回根节点
      • 在最后一个节点返回null
  • previousNode()
    • 遍历后退一步
    • 返回
      • 在根节点后返回null

nextNode() 和 previousNode() 方法共同维护 NodeIterator 对 DOM 结构的内部指针，因此修改 DOM 结构也会体现在遍历中。

TreeWalker

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createTreeWalker
TreeWalker为NodeIterator的高级版。

创建

docuement.createTreeWalker(root, whatToShow, filter)
接收参数与NodeIterator相同

遍历

除了nextNode()、perviousNode()方法，还有在DOM结构中向不同方向遍历的方法。

  • parentNode() 遍历到当前节点的父节点
  • firstChild() 遍历到当前节点的第一个子节点
  • lastChild() 遍历到当前节点的最后一个子节点
  • nextSibling() 遍历到当前节点的下一个同胞节点
  • previousSibling() 遍历到当前节点的上一个同胞节点