DOM深度优先遍历

DOM2定义了两个用于顺序遍历DOM结构的类型：NodeIterator和TreeWalker，这两个类型能够基于给定的起点对DOM结构执行深度优先的遍历操作。

NodeIterator

var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
参数：

• root: 遍历起点
• whatToShow: 表示访问哪些节点的数字代码
• filter: 是一个用来选择相关节点的NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数

方法：
parentNode()移动当前 Node到文档顺序中的第一个“可见”的祖先节点，并返回该节点。
firstChild()移动当前 Node到当前节点的第一个“可见”子节点，并返回该节点。

whatToShow 常用常量：

NodeFilter对象

NodeFilter 接口表示一个对象，此对象用于过滤 NodeIterator 或 TreeWalker 中的节点。它既不能处理 DOM，也不能遍历节点；它只能根据提供的过滤器对单个节点进行判定。
方法：NodeFilter.acceptNode()

例：

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

var div = document.getElementById('#div1');
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null);
var node = iterator.nextNode();
while(node !== null){
  console.log(node.tagName);
  node = iterator.nextNode();
}
// DIV
// P
// B
// UL
// LI
// LI

var div = document.getElementById('#div1');
var filter = function(node){
  return node.tagName.toLowerCase() === 'li'
  ? NodeFilter.FILTER_ACCEPT
  : NodeFilter.FILTER_SKIP
}
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter);
var node = iterator.nextNode();
while(node !== null){
  console.log(node.tagName);
  node = iterator.nextNode();
}

兼容性

TreeWalker

TreeWalker是NodeIterator的一个更高级的版本。除了包括nextNode()和previousNode()的方法之外，还提供了下列在不同方向上遍历DOM结构的方法：
parentNode()移动当前 Node到文档顺序中的第一个“可见”的祖先节点，并返回该节点。
firstChild()移动当前 Node到当前节点的第一个“可见”子节点，并返回该节点。
lastChild()移动当前 Node到当前节点的最末一个“可见”子节点，并返回该节点。
previousSibling()移动当前 Node到当前节点的前一个兄弟节点，并返回该节点。
nextSibling()移动当前 Node到当前节点的后一个兄弟节点，并返回该节点。
previousNode()移动当前 Node到文档顺序中前一个节点，并返回该节点。
nextNode()移动当前 Node到文档顺序中下一个节点，并返回该节点。

创建：
var walker = document.createTreeWalker(root, whatToShow, filter);

当我们知道

var div = document.getElementById('#div1');
var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null);
walker.firstChild(); // 转到<p>
walker.nextSibling(); // 转到<ul>
var node = walker.firstChild(); // 转到第一个<li>
while(node !== null){
  console.log(node.tagName);
  node = walker.nextSibling();
}