深度、广度优先算法

深度优先DFS的原理是利用递归一直往下找

广度优先BFS的原理是利用一个队列循环，不断往队列中push子元素，并弹出队列中的第一个元素放置到另一个数组中，当队列长度为0时，此时数组元素就是BFS的搜索顺序

下面看代码：

假设页面有如下 DOM节点，分别用BFS和DFS进行搜索

    <div class="parent">
        <div class="child1">
            <div class="child11"></div>
            <div class="child12">
                <div class="child121"></div>
                <div class="child122"></div>
            </div>
        </div>
        <div class="child2">
            <div class="child21"></div>
            <div class="child22"></div>
        </div>
        <div class="child3"></div>
    </div>

DFS:

    let parent=document.querySelector('.parent')
    function deepFirst(list=[],node){
        list.push(node)
        let len =node.children.length
        for(let i=0;i<len;i++){
            // list.push(node.children[i])
            deepFirst(list,node.children[i])

        }
        return list
    }
    nodeArr=deepFirst([],parent)
    console.log(nodeArr)

BFS:

    let parent=document.querySelector('.parent')
    function breadthFirst(node){
        // 队列原理 先入队，再shift 进新列表 将子元素入队 
        let list=[]
        let queue=[]
        queue.push(node)
        while(queue.length){
            let item=queue.shift()
            let child=item.children
            list.push(item)
            if(child){
                for(let i=0;i<child.length;i++){
                    queue.push(child[i])
                }
            }
        }
        return list
    }
    let list=breadthFirst(parent)
    console.log(list)

参考链接

深度优先-广度优先搜索算法