JS算法之深度优先遍历(DFS)和广度优先遍历(BFS)

背景
在开发页面的时候，我们有时候会遇到这种需求：在页面某个dom节点中遍历，找到目标dom节点，我们正常做法是利用选择器document.getElementById()，document.getElementsByName()或者document.getElementsByTagName()，但在本文，我们从算法的角度去查找dom节点，同时理解一下深度优先遍历(DFS)和广度优先遍历(BFS)的原理。

准备
假设页面上的dom结构如下：

 <div id="root">
    <ul>
        <li>
            <a href="">
                <img src="" alt="">
            </a>
        </li>
        <li>
            <span></span>
        </li>
        <li>
        </li>
    </ul>
    <p></p>
    <button></button>
</div>

让我们来把这个dom结构转化成树的样子

这样之后，dom结构似乎清楚了不少。

深度优先遍历（Depth-First Search）

该方法是以纵向的维度对dom树进行遍历，从一个dom节点开始，一直遍历其子节点，直到它的所有子节点都被遍历完毕之后在遍历它的兄弟节点。即如图所示（遍历顺序为红字锁标）：

js实现该算法代码(递归版本)：

        //获得到该节点下所有节点
        //法1(递归):
        function recursive(node, nodeList) {
            if (node) {
                nodeList.push(node);
                var children = node.children;
                for (var i = 0; i < children.length; i++)
                    //每次递归的时候将 需要遍历的节点 和 节点所存储的数组传下去
                    recursive(children[i], nodeList);
            }
            return nodeList;
        }

非递归版本：

        //获得到该节点下所有节点
        //法2(循环):
        function cycle(node) {
            var nodeList = [];
            if (node != null) {
            	//代表未遍历的节点,该节点数组中可能存在未加入到返回数据的元素
                var stack = [];
                stack.push(node);
                while (stack.length != 0) {
            //取stack中最后一个节点,并将该节点在stack中删除,加入的返回的数据中
                    var item = stack.pop();
                    nodeList.push(item);
                    var children = item.children;
                    for (var i = children.length - 1; i >= 0; i--)
                    //如果节点中有子节点,则加入stack中
                        stack.push(children[i]);
                }
            }
            return nodeList;
        }

recursive接受两个参数，第一个参数是需要遍历的节点，第二个是节点所存储的数组，并且返回遍历完之后的数组，该数组的元素顺序就是遍历顺序，调用方法：

var node = document.querySelector('#root');
console.log(recursive(node, []))
console.log(cycle(node))

广度优先遍历（breadth-first traverse）

该方法是以横向的维度对dom树进行遍历，从该节点的第一个子节点开始，遍历其所有的兄弟节点，再遍历第一个节点的子节点，完成该遍历之后，暂时不深入，开始遍历其兄弟节点的子节点。即如图所示（遍历顺序为红字锁标）：

实现方法,循环实现:

function cycle(node) {
            var nodes = [];
            if (node != null) {
                var queue = [];
                queue.unshift(node);
                while (queue.length != 0) {
                    //截取第一个元素,并将该元素从队列溢出
                    var item = queue.shift();
                    nodes.push(item);
                    var children = item.children;
                    for (var i = 0; i < children.length; i++)
                        //如果该元素下有子元素,将子元素加入到队列中
                        queue.push(children[i]);
                }
            }
            return nodes;
        }