javascript基础从小白到高手系列一百三十二：TreeWalker

TreeWalker 是NodeIterator 的高级版。除了包含同样的nextNode()、previousNode()方法，
TreeWalker 还添加了如下在DOM 结构中向不同方向遍历的方法。
 parentNode()，遍历到当前节点的父节点。
 firstChild()，遍历到当前节点的第一个子节点。
 lastChild()，遍历到当前节点的最后一个子节点。
 nextSibling()，遍历到当前节点的下一个同胞节点。
 previousSibling()，遍历到当前节点的上一个同胞节点。
TreeWalker 对象要调用document.createTreeWalker() 方法来创建， 这个方法接收与
document.createNodeIterator()同样的参数：作为遍历起点的根节点、要查看的节点类型、节点
过滤器和一个表示是否扩展实体引用的布尔值。因为两者很类似，所以TreeWalker 通常可以取代
NodeIterator，比如：
let div = document.getElementById(“div1”);
let filter = function(node) {
return node.tagName.toLowerCase() == “li” ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_SKIP;
};
let walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT,
filter, false);
let node = iterator.nextNode();
while (node !== null) {
console.log(node.tagName); // 输出标签名
node = iterator.nextNode();
}
不同的是，节点过滤器（filter）除了可以返回NodeFilter.FILTER_ACCEPT 和NodeFilter.
FILTER_SKIP，还可以返回NodeFilter.FILTER_REJECT。在使用NodeIterator 时，NodeFilter.
FILTER_SKIP 和NodeFilter.FILTER_REJECT 是一样的。但在使用TreeWalker 时，NodeFilter.
FILTER_SKIP 表示跳过节点，访问子树中的下一个节点，而NodeFilter.FILTER_REJECT 则表示跳
过该节点以及该节点的整个子树。例如，如果把前面示例中的过滤器函数改为返回NodeFilter.
FILTER_REJECT（而不是NodeFilter.FILTER_SKIP），则会导致遍历立即返回，不会访问任何节点。
这是因为第一个返回的元素是

，其中标签名不是"li"，因此过滤函数返回NodeFilter.FILTER_
REJECT，表示要跳过整个子树。因为

本身就是遍历的根节点，所以遍历会就此结束。
当然，TreeWalker 真正的威力是可以在DOM 结构中四处游走。如果不使用过滤器，单纯使用
TreeWalker 的漫游能力同样可以在DOM 树中访问

• 元素，比如：
  let div = document.getElementById(“div1”);
  let walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
  walker.firstChild(); // 前往

  
  walker.nextSibling(); // 前往

  • 
    let node = walker.firstChild(); // 前往第一个
  • 
    while (node !== null) {
    console.log(node.tagName);
    node = walker.nextSibling();
    }
    因为我们知道
  • 元素在文档结构中的位置，所以可以直接定位过去。先使用firstChild()前
    往

    元素，再通过nextSibling()前往

    • 元素，然后使用firstChild()到达第一个
    • 元素。
      注意，此时的TreeWalker 只返回元素（这是因为传给createTreeWalker()的第二个参数）。最后就
      可以使用nextSibling()访问每个
    • 元素，直到再也没有元素，此时方法返回null。
      TreeWalker 类型也有一个名为currentNode 的属性，表示遍历过程中上一次返回的节点（无论
      使用的是哪个遍历方法）。可以通过修改这个属性来影响接下来遍历的起点，如下面的例子所示：
      let node = walker.nextNode();
      console.log(node === walker.currentNode); // true
      walker.currentNode = document.body; // 修改起点
      相比于NodeIterator，TreeWalker 类型为遍历DOM 提供了更大的灵活性。