javascript基础学习系列四百三十八：TreeWalker

TreeWalker 是 NodeIterator 的高级版。除了包含同样的 nextNode()、previousNode()方法，TreeWalker 还添加了如下在 DOM 结构中向不同方向遍历的方法。
 parentNode()，遍历到当前节点的父节点。
 firstChild()，遍历到当前节点的第一个子节点。
 lastChild()，遍历到当前节点的最后一个子节点。
 nextSibling()，遍历到当前节点的下一个同胞节点。
 previousSibling()，遍历到当前节点的上一个同胞节点。
TreeWalker 对象要调用 document.createTreeWalker()方法来创建，这个方法接收与document.createNodeIterator()同样的参数：作为遍历起点的根节点、要查看的节点类型、节点过滤器和一个表示是否扩展实体引用的布尔值。因为两者很类似，所以 TreeWalker 通常可以取代NodeIterator，比如：

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 walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false); 
walker.firstChild(); // 前往<p> 
walker.nextSibling(); // 前往<ul> 
let node = walker.firstChild(); // 前往第一个<li> 
while (node !== null) { 
 console.log(node.tagName); 
 node = walker.nextSibling(); 
} 

因为我们知道

• 元素在文档结构中的位置，所以可以直接定位过去。先使用 firstChild()前往

  元素，再通过 nextSibling()前往

  • 元素，然后使用 firstChild()到达第一个
  • 元素。
    注意，此时的 TreeWalker 只返回元素（这是因为传给 createTreeWalker()的第二个参数）。最后就
    可以使用 nextSibling()访问每个
  • 元素，直到再也没有元素，此时方法返回 null。
    TreeWalker 类型也有一个名为 currentNode 的属性，表示遍历过程中上一次返回的节点（无论使用的是哪个遍历方法）。可以通过修改这个属性来影响接下来遍历的起点，如下面的例子所示：

• console.log(node === walker.currentNode); // true 
  walker.currentNode = document.body; // 修改起点
  

  相比于 NodeIterator，TreeWalker 类型为遍历 DOM 提供了更大的灵活性。