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

輸入結果：