深度优先遍历

例图

                A
           B    C    D
        E    F    G    H     

从启点出发，找到其一个子元素，然后继续找到子元素的一个子元素，直至没有子元素。然后这个没有子元素的父元素开始继续依次找到其子元素。直到全部。

1.从顶点A触发，找到其第一个子元素B然后再向下找到B的第一个子元素E，此时E已没有子元素。 （一层一层深入下去，顾算法名为深度遍历）
2.因E没有子元素，所以返回到E的父元素B，找至其领一个子元素F。发现F也无子元素
3.因F无子元素。所以返回F的父元素B，因B无其他元素。所以返回至B的父元素A
4.继续从A找寻未定位过的元素。C和D方法同

code

HTML

   <div class="parent">
    <div class="child-1">
      <div class="child-1-1">
        <div class="child-1-1-1">
          a
        </div>
      </div>
      <div class="child-1-2">
        <div class="child-1-2-1">
          b
        </div>
      </div>
      <div class="child-1-3">
        c
      </div>
    </div>
    <div class="child-2">
      <div class="child-2-1">
        d
      </div>
      <div class="child-2-2">
        e
      </div>
    </div>
    <div class="child-3">
      <div class="child-3-1">
        f
      </div>
    </div>
   </div>

JS

    let deepTraversal1 = (node, nodeList = []) => {
      if (node !== null) {
        nodeList.push(node)
        let children = node.children
        for (let i = 0; i < children.length; i++) {
          deepTraversal1(children[i], nodeList)
        }
      }
      return nodeList
    }

广度优先遍历

与深度相反，广度优先匹配兄弟节点（元素）

code

jS

    let widthTraversal2 = (node) => {
      let nodes = []
      let stack = []
      if (node) {
        stack.push(node)
        while (stack.length) {
          let item = stack.shift()
          let children = item.children
          nodes.push(item)
            // 队列，先进先出
            // nodes = [] stack = [parent]
            // nodes = [parent] stack = [child1,child2,child3]
            // nodes = [parent, child1] stack = [child2,child3,child1-1,child1-2]
            // nodes = [parent,child1,child2]
          for (let i = 0; i < children.length; i++) {
            stack.push(children[i])
          }
        }
      }
      return nodes
    }