Analyse durch DOM erhalten alle Kinder und Werte

Container ist ein div habe ich Hinzugefügt einige grundlegende HTML zu.

Die debug_log Funktion druckt die folgenden:

Ich bin in einem span!

Ich bin in einem div!

Ich bin in einer

p

Was geschah mit dem rest der text im p-tag ("aragraph tag!!"). Ich glaube, ich verstehe nicht, wie genau das laufen durch den Dokument-Baum. Ich brauche eine Funktion, die analysiert das gesamte Dokument-Baum und die Rückkehr all der Elemente und deren Werte. Der code unten ist eine Art erste Riss an nur immer alle Werte angezeigt.

    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]);
        }
     }
  • Sind Sie gerade auf der Suche nach der DOM-Versionen dieser Elemente/Knoten oder die HTML-Darstellung davon?
InformationsquelleAutor Tyler Biscoe | 2011-06-08
  1. 9

    In der Regel beim Durchlaufen der DOM, den Sie angeben möchten, einen Ausgangspunkt. Von dort aus überprüfen, ob der start Punkt hat childNodes. Wenn es funktioniert, eine Schleife und Rekursion die Funktion aus, wenn Sie zu haben childNodes.

    Hier finden Sie den code, dass sich die Ausgaben auf der Konsole mit dem DOM bilden diese Knoten (ich habe das Dokument/HTML-element als start-Punkt). Sie müssen zum ausführen einer wenn gegen window.console wenn Sie, dass nicht-Entwickler zu laden, auf dieser Seite/code und mit console:

    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); 
        }  
    }  
}

    Beispiel: http://jsfiddle.net/ee5X6/

    InformationsquelleAutor
  2. 0

    In

    <p>I\'m in a <span>p</span>aragraph tag!!</p>

    verlangen Sie die erste Kind, das ist der text-node mit "I\'m in a".
    Der text "aragraph tag!!" ist das Dritte Kind, das nicht angemeldet ist.

    Neugierig, die Letzte Zeile mit "p" sollte niemals vorkommen, da das span-element ist nicht ein direktes untergeordnetes Element des Containers.

    InformationsquelleAutor Wolfgang Kuehn
  3. 0

    Ich bin nicht sicher, es ist was Sie brauchen, oder wenn es möglich ist, in Ihrem Umfeld, aber jQuery erreichen können, etwas ähnliches ganz leicht. Hier ist eine schnelle jQuery Beispiel, die funktionieren könnte.

    <html>
<head>
<script src="INCLUDE JQUERY HERE">
</script>
</head>
<body>
<span>
<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>
</span>
<script>
function traverse(elem){
  $(elem).children().each(function(i,e){
    console.log($(e).text());
    traverse($(e));
  });
}

traverse($("body").children().first());
</script>
</body>
<html>

    Welche gibt die folgende Ausgabe der Konsole:

    I\'m in a span! 
I\'m in a div! 
I\'m in a paragraph tag!!
p
    • Sorry ich habe mir nicht die `\`s aus, wenn ich kopierte Ihr Vorbild.
    • Es gibt wirklich keine Notwendigkeit für jQuery hier.
    InformationsquelleAutor NullRef
Schreibe einen Kommentar