遍历DOM的方式

以如下html代码为例：

<div id="content">
    <h3>我是标题</h3>
    <p>
      <span>我是span内容1</span>
      <span>我是span内容2</span>
    </p>
  </div>

1.比较常见的是使用递归的方式

   function traversalDom(element, callback) {
      callback(element);
      element = element.firstElementChild;
      while(element) {
        traversalDom(element, callback);
        element = element.nextElementSibling;
      }
    }
    const subTree = document.getElementById('content');
    const callback = subTree => {
      console.log(element.innerText, element.tagName, '子元素的个数：', element.childElementCount)
    }
    traversalDom(subTree, callback)

2.使用es6的生成器。 

   function* traversalDom(element) {
      yield element;
      element = element.firstElementChild;
      while (element) {
//用yield将迭代控制转移到另一个DomTraversal生成器实例上
        yield* traversalDom(element); 
        element = element.nextElementSibling;
      }
    }
    const subTree = document.getElementById('content');
    for( let element of traversalDom(subTree)) {
      console.log(element.innerText, element.tagName, '子元素的个数：', element.childElementCount)
    }

输出结果如下图：

不同于在下一层递归处理每个访问过的节点子树，使用生成器的方式为每个访问过的节点创建了一个生成器并将执行权交给它，从而使我们能够以迭代的方式书写概念上递归的代码。它的好处在于我们能够不凭借回调函数，仅仅以一个简单的for-of循环就能处理生成的节点。