DOMを介して解析すると、すべての子と値が取得されます

Parsing through DOM get all children and values

出典: link タグ:javascriptdomrecursion 更新時間:

  問題

コンテナはdivです。基本的なHTMLを追加しました。

debug_log関数は以下を出力しています:

私はスパンにいる!
または 私はdivにいる!
または 私は
または P

pタグの残りのテキスト( "aragraphタグ!")に何が起こったのですか?私はドキュメントツリーを正確に歩く方法を理解していないと思います。ドキュメントツリー全体を解析し、すべての要素とその値を返す関数が必要です。以下のコードは、表示されるすべての値を取得するための最初のクラックです。 

     container.innerHTML = '<span>I\'m in a span! </span><div> I\'m in a div! </div><p>I\'m in a <span>p</span>aragraph tag!!</p>';

    DEMO.parse_dom(container);



   DEMO.parse_dom = function(ele)
    {
        var child_arr = ele.childNodes;

        for(var i = 0; i < child_arr.length; i++)
        {
            debug_log(child_arr[i].firstChild.nodeValue);
            DEMO.parse_dom(child_arr[i]);
        }
     }

  ベストアンサー

一般的にDOMをトラバースするときは、開始点を指定します。そこから、開始点にchildNodesがあるかどうかを確認します。そうであれば、それらをループし、childNodesもあれば関数を再帰します。

これらのノードのDOM形式を使用してコンソールに出力するコードを次に示します(ドキュメント/ HTML要素を開始点として使用しました)。非開発者がこのページ/コードを読み込み、consoleを使用できるようにするには、window.consoleに対してifを実行する必要があります。 

 recurseDomChildren(document.documentElement, true);

function recurseDomChildren(start, output)
{
    var nodes;
    if(start.childNodes)
    {
        nodes = start.childNodes;
        loopNodeChildren(nodes, output);
    }
}

function loopNodeChildren(nodes, output)
{
    var node;
    for(var i=0;i<nodes.length;i++)
    {
        node = nodes[i];
        if(output)
        {
            outputNode(node);
        }
        if(node.childNodes)
        {
            recurseDomChildren(node, output);
        }
    }
}

function outputNode(node)
{
    var whitespace = /^\s+$/g;
    if(node.nodeType === 1)
    {
        console.log("element: " + node.tagName);  
    }else if(node.nodeType === 3)
    {
        //clear whitespace text nodes
        node.data = node.data.replace(whitespace, "");
        if(node.data)
        {
            console.log("text: " + node.data); 
        }  
    }  
}

例: http://jsfiddle.net/ee5X6/

  同じタグがついた質問を見る

javascriptdomrecursion
前へ:
次へ: