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,

当然，TreeWalker 真正的威力是可以在 DOM 结构中四处游走。如果不使用过滤器，单纯使用 TreeWalker 的漫游能力同样可以在 DOM 树中访问

• 元素，比如: 20

• let div = document.getElementById("div1");
  let walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
  let node = iterator.nextNode();
  while (node !== null) {
    console.log(node.tagName);
    node = iterator.nextNode();
  }
       filter, false);
  // 输出标签名
  

  不同的是，节点过滤器(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，表示要跳过整个子树。因为

  本身就是遍历的根节点，所以遍历会就此结束。

     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 的属性，表示遍历过程中上一次返回的节点(无论 使用的是哪个遍历方法)。可以通过修改这个属性来影响接下来遍历的起点，如下面的例子所示:

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

  相比于 NodeIterator，TreeWalker 类型为遍历 DOM 提供了更大的灵活性。
  为了支持对页面更细致的控制，DOM2 Traversal and Range 模块定义了范围接口。范围可用于在文 档中选择内容，而不用考虑节点之间的界限。(选择在后台发生，用户是看不到的。)范围在常规 DOM 操作的粒度不够时可以发挥作用。

  DOM 范围

  DOM2 在 Document 类型上定义了一个 createRange()方法，暴露在 document 对象上。使用这 个方法可以创建一个 DOM 范围对象，如下所示:

     let range = document.createRange();
  

  与节点类似，这个新创建的范围对象是与创建它的文档关联的，不能在其他文档中使用。然后可以 使用这个范围在后台选择文档特定的部分。创建范围并指定它的位置之后，可以对范围的内容执行一些 操作，从而实现对底层 DOM 树更精细的控制。
  每个范围都是 Range 类型的实例，拥有相应的属性和方法。下面的属性提供了与范围在文档中位 置相关的信息。
   startContainer，范围起点所在的节点(选区中第一个子节点的父节点)。
   startOffset，范围起点在 startContainer 中的偏移量。如果 startContainer 是文本节 点、注释节点或 CData 区块节点，则 startOffset 指范围起点之前跳过的字符数;否则，表示
  范围中第一个节点的索引。
   endContainer，范围终点所在的节点(选区中最后一个子节点的父节点)。
   endOffset，范围起点在 startContainer 中的偏移量(与 startOffset 中偏移量的含义相同)。
   commonAncestorContainer，文档中以 startContainer 和 endContainer 为后代的最深的节点。 这些属性会在范围被放到文档中特定位置时获得相应的值。