L'analyse par DOM scolariser tous les enfants et les valeurs

Conteneur est un div, j'ai ajouté un peu de HTML.

La debug_log fonction d'impression suivants:

Je suis dans une période!
Je suis dans une div!
Je suis dans une
p

Ce qui s'est passé pour le reste du texte dans la balise p ("aragraph tag!!"). Je pense que je ne comprends pas comment exactement à pied à travers l'arborescence du document. J'ai besoin d'une fonction qui va analyser l'ensemble de l'arborescence du document et le retour de tous les éléments et de leurs valeurs. Le code ci-dessous est une sorte de première fissure au juste ce que toutes les valeurs affichées.

    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]);
        }
     }
Vous êtes simplement à la recherche pour les DOM versions de ces éléments, de nœuds ou de la représentation HTML d'entre eux?

OriginalL'auteur Tyler Biscoe | 2011-06-08

  1. 9

    Généralement lors de la traversée du DOM, vous souhaitez spécifier un point de départ. À partir de là, de vérifier si le point de départ a childNodes. Si elle le fait, boucle à travers eux et répéter la fonction, s'ils n'ont childNodes.

    Voici un code que les sorties de la console en utilisant le DOM forme de ces nœuds (j'ai utilisé le document/élément HTML comme un point de départ). Vous aurez besoin de lancer une contre si window.console si vous êtes en permettant à des non-développeurs de charger cette page/code et à l'aide de 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); 
        }  
    }  
}

    Exemple: http://jsfiddle.net/ee5X6/

    OriginalL'auteur

  2. 0

    Dans

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

    vous demande le premier enfant, qui est le nœud de texte contenant "I\'m dans un".
    Le texte "aragraph tag!!" est le troisième enfant, qui n'est pas connecté.

    Curieusement, la dernière ligne contenant "p" ne devrait jamais se produire, parce que l'élément span n'est pas un enfant direct de conteneur.

    OriginalL'auteur Wolfgang Kuehn

  3. 0

    Je ne suis pas sûr que c'est ce que vous avez besoin ou si c'est possible dans votre environnement, mais jQuery peut accomplir quelque chose de similaire assez facilement. Voici un rapide jQuery exemple, qui pourrait travailler.

    <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>

    Qui donne à la suite de la console de sortie:

    I\'m in a span! 
I\'m in a div! 
I\'m in a paragraph tag!!
p
    Désolé je n'ai pas pris le `\ \ `s quand j'ai copié votre exemple.
    Il n'y a vraiment pas besoin de jQuery ici.

    OriginalL'auteur NullRef