迭代节点

Created: November-22, 2018

该 NodeIterator 接口提供了一个 DOM 树遍历节点的方法。

鉴于这样的文件：

<html>
<body>
  <section class="main">
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </section>
</body>
</html>

可以想象一个迭代器来获取 <li> 元素：

let root = document.body;
let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
let filter = (node) => node.nodeName.toLowerCase() === 'li' ? 
  NodeFilter.FILTER_ACCEPT : 
  NodeFilter.FILTER_REJECT;
let iterator = document.createNodeIterator(root, whatToShow, filter);
var node;
while (node = iterator.nextNode()) {
  console.log(node);
}

示例改编自 Mozilla 贡献者从 Mozilla 开发者网络上的 document.createNodeIterator()文档提供的示例，该文档在 CC-by-SA 2.5下获得许可。

这将记录如下：

<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>

请注意，这与 TreeWalker iterface 类似，但仅提供 nextNode() 和 previousNode() 功能。