JavaScript關於DOM節點的深度優先和廣度優先遍歷

本文要介紹JavaScript關於DOM節點的深度優先和廣度優先遍歷，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

HTML的樹狀結構如上

深度優先遍歷

#對於樹的深度優先遍歷，執行結果應該如下：

採用遞歸方式

 var arr=[];
    //深度优先
    function traversalDFSDOM (rootDom) {
        if(!rootDom)return;
        if(rootDom.children.length==0){
            arr.push(rootDom)//没有孩子节点，表示是个叶子节点，将节点push到数组中
            return;
        }
        arr.push(rootDom)//非孩子节点，在每次遍历它的孩子节点之前先把它push到数组中
        for(var i=0;i<rootdom.children.length><p>結果如下</p>
<p style="text-align: center;"><img src="/static/imghwm/default1.png" data-src="https://img-blog.csdn.net/20180405023706585?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xYWTIyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>##( script標籤寫在body外面，但執行的時候瀏覽器會把它放到body中，變成最後一個元素)<p><br></p>採用非遞歸的方式<h5><pre class="brush:php;toolbar:false"> //深度优先非递归
    function traversalDFSDOM(rootDom) {
        if(!rootDom)return;
        var stack=[]
        var node = rootDom;
        while(node!=null){
            arr.push(node);
            if(node.children.length>=0){
                for(let i=node.children.length-1;i>=0;i--)
                    stack.unshift(node.children[i]);
            }
            node = stack.shift()
        }
    }
    traversalDFSDOM(bodyDom)

非遞歸主要採取模擬隊列的方法過程：

以此類推，需要注意的是i的循環需要從node.children.length-1開始到0

廣度優先遍歷

對於DOM樹的廣度優先遍歷的結果應該如下

採用遞歸方式

var stack=[bodyDom];//bodyDom是遍历的根节点
    function traversalBFSDOM (count) {
        count = count || 0;
        if (stack[count]) {
            var children = stack[count].children;
            for (let i = 0; i <pre class="brush:php;toolbar:false">traversalBFSDOM(0)

採用非遞歸方式

    function traversalBFSDOM (rootDom) {
        if(!rootDom)return;
        arr.push(rootDom)
        var queue = [rootDom];
        while(queue.length){
            var node = queue.shift();
            if(!node.children.length){
                continue;
            }
            for(var i=0;i<node.children.length></node.children.length>

主要採用先進先出的思想，依序遍歷每個節點下的孩子節點。

運行結果如下：

學習是個過程，學會深入學習

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請造訪

JavaScript影片教學！

相關推薦：

php公益訓練影片教學

#JavaScript圖文教學

JavaScript線上手冊

以上是JavaScript關於DOM節點的深度優先和廣度優先遍歷的詳細內容。更多資訊請關注PHP中文網其他相關文章！