js中dom节点的深度优先遍历和广度优先遍历

深度优先遍历DFS
假设初始状态是图中所有顶点均未被访问，则从某个顶点v出发，首先访问该顶点然后依次从它的各个未被访问的邻接点出发深度优先搜索遍历图，直至图中所有和v有路径相通的顶点都被访问到。若此时尚有其他顶点未被访问到，则另选一个未被访问的顶点作起始点，重复上述过程，直至图中所有顶点都被访问到为止。

广度优先遍历 BFS
从图中某顶点v出发，在访问了v之后依次访问v的各个未曾访问过的邻接点，然后分别从这些邻接点出发依次访问它们的邻接点，并使得“先被访问的顶点的邻接点先于后被访问的顶点的邻接点被访问，直至图中所有已被访问的顶点的邻接点都被访问到。 如果此时图中尚有顶点未被访问，则需要另选一个未曾被访问过的顶点作为新的起始点，重复上述过程，直至图中所有顶点都被访问到为止。

上面的看完之后很懵逼是把，下面用通俗的讲一讲

没想到之前学习的c语言版的数据结构在这里也用到了，因为这个和数据结构的二叉树很像

深度优先遍历 顺序: 1 2 4 5 7 8 3 6 (二叉树中又叫做先序遍历)
广度优先遍历 顺序：1 2 3 4 5 6 7 8 （二叉树中又叫做层级遍历）
上面的可以想象成我们的dom节点树

<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>

深度优先遍历 使用递归来做

var node:any=document.querySelector('.parent');
let deepBianli=(node,nodeList=[])=>{
    if(node!=null){
        nodeList.push(node);
        let children:any=node.children;
        for(let i:number=0;i<children.length;i++){
            deepBianli(children[i],nodeList);
        }
    }
    return nodeList;
}
console.log(deepBianli(node));

输出结果

广度优先遍历

var node=document.querySelector('.parent');
let widthBianli=(node)=>{
    let nodes=[];
    let stack=[];
    if(node){
        stack.push(node);
        while(stack.length){
            let item=stack.shift();// 删除数组中的第一个元素 并且返回
            let children=item.children;
            nodes.push(item);
            for(let i=0;i<children.length;i++){
                stack.push(children[i])
            }
        }
    }
    return nodes;
}
console.log(widthBianli(node));

输入结果：