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></rootdom.children.length>

結果は次のようになります

(script タグは本文の外に書かれていますが、実行されるとブラウザはそれを本文に入れて最後の要素とします)

非再帰的メソッド

 //深度优先非递归
    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 中国語 Web サイトの他の関連記事を参照してください。