Get DOM tree with javascript

I am developing a small script that analyzes the DOM of an HTML page and write on screen the tree of nodes.

It is a simple function that is called recursively for get all nodes and their children. The information for each node is stored in an array (custom object).

I have gotten get all the nodes in the DOM, but not how to paint in a tree through nested lists.

###JSFIDLE### /

###HTML####

<html>
    <head>
        <title>Formulario para validar</title>
        <script type="text/javascript" src="actividad_1.js">Texto script</script>
    </head>
    
    <body>
        <p>Primer texto que se visualiza en la Pagina</p>
        <div>Esto es un div</div>
        <div>Otro div que me encuentro</div>
        <p>Hay muchos parrafos</p>
        <ul>
            <li>Lista 1</li>
            <li>Lista 2</li>
            <li>Lista 3</li>
        </ul>
        <button type="button" id="muestra_abol">Muestra Arbol DOM</button>
    </body>
</html>

###JS###

// Ejecuta el script una vez se ha cargado toda la página, para evitar que el BODY sea NULL.
window.onload = function(){
    
    // Evento de teclado al hacer click sobre el boton que muestra el arbol.
    document.getElementById("muestra_abol").addEventListener("click", function(){
        muestraArbol();
    });
    
    // Declara el array que contendrá los objetos con la información de los nodos.
    var nodeTree = [];
    
    // Recoge el nodo raíz del DOM.
    var obj_html = document.documentElement;
    
    // Llama a la función que genera el árbol de nodos de la página.
    getNodeTree(obj_html);
    console.log(nodeTree);
    
    // Función que recorre la página descubriendo todo el árbol de nodos.
    function getNodeTree(node)
    {
        // Comprueba si el nodo tiene hijos.
        if (node.hasChildNodes())
        {
            // Recupera la información del nodo.
            var treeSize = nodeInfo(node);
            
            // Calcula el índice del nodo actual.
            var treeIndex = treeSize - 1;
                        
            // Recorre los hijos del nodo.
            for (var j = 0; j < node.childNodes.length; j++)
            {
                // Comprueba, de forma recursiva, los hijos del nodo.
                getNodeTree(node.childNodes[j]);
            }
        }
        else
        {
            return false;
        }
    }
    
    // Función que devuelve la información de un nodo.
    function nodeInfo(node,)
    {
        // Declara la variable que contendrá la información.
        var data = {
            node: node.nodeName,
            parent: node.parentNode.nodeName,
            childs: [],
            content: (typeof node.text === 'undefined'? "" : node.text)
        }
        var i = nodeTree.push(data); 
        return i;
    }
    
    // Función que devuelve los datos de los elementos hijos de un nodo.
    function muestraArbol()
    {
        var txt = "";
        
        // Comprueba si existen nodos.
        if (nodeTree.length > 0)
        {
            // Recorre los nodos.
            for (var i = 0; i < nodeTree.length; i++)
            {   
                txt += "<ul><li>Nodo: " + nodeTree[i].node + "</li>";
                txt += "<li> Padre: " + nodeTree[i].parent + "</li>";
                txt += "<li>Contenido: " + nodeTree[i].content + "</li>";
                txt += "</ul>";
            }
            document.write(txt);
        }
        else
        {
            document.write("<h1>No existen nodos en el DOM.</h1>");
        }
    }   
};

Does anyone es up how to draw a nested tree to glance at the parent and child nodes you distinguish?

I am developing a small script that analyzes the DOM of an HTML page and write on screen the tree of nodes.

It is a simple function that is called recursively for get all nodes and their children. The information for each node is stored in an array (custom object).

I have gotten get all the nodes in the DOM, but not how to paint in a tree through nested lists.

###JSFIDLE### https://jsfiddle/06krpdyh/

###HTML####

<html>
    <head>
        <title>Formulario para validar</title>
        <script type="text/javascript" src="actividad_1.js">Texto script</script>
    </head>
    
    <body>
        <p>Primer texto que se visualiza en la Pagina</p>
        <div>Esto es un div</div>
        <div>Otro div que me encuentro</div>
        <p>Hay muchos parrafos</p>
        <ul>
            <li>Lista 1</li>
            <li>Lista 2</li>
            <li>Lista 3</li>
        </ul>
        <button type="button" id="muestra_abol">Muestra Arbol DOM</button>
    </body>
</html>

###JS###

// Ejecuta el script una vez se ha cargado toda la página, para evitar que el BODY sea NULL.
window.onload = function(){
    
    // Evento de teclado al hacer click sobre el boton que muestra el arbol.
    document.getElementById("muestra_abol").addEventListener("click", function(){
        muestraArbol();
    });
    
    // Declara el array que contendrá los objetos con la información de los nodos.
    var nodeTree = [];
    
    // Recoge el nodo raíz del DOM.
    var obj_html = document.documentElement;
    
    // Llama a la función que genera el árbol de nodos de la página.
    getNodeTree(obj_html);
    console.log(nodeTree);
    
    // Función que recorre la página descubriendo todo el árbol de nodos.
    function getNodeTree(node)
    {
        // Comprueba si el nodo tiene hijos.
        if (node.hasChildNodes())
        {
            // Recupera la información del nodo.
            var treeSize = nodeInfo(node);
            
            // Calcula el índice del nodo actual.
            var treeIndex = treeSize - 1;
                        
            // Recorre los hijos del nodo.
            for (var j = 0; j < node.childNodes.length; j++)
            {
                // Comprueba, de forma recursiva, los hijos del nodo.
                getNodeTree(node.childNodes[j]);
            }
        }
        else
        {
            return false;
        }
    }
    
    // Función que devuelve la información de un nodo.
    function nodeInfo(node,)
    {
        // Declara la variable que contendrá la información.
        var data = {
            node: node.nodeName,
            parent: node.parentNode.nodeName,
            childs: [],
            content: (typeof node.text === 'undefined'? "" : node.text)
        }
        var i = nodeTree.push(data); 
        return i;
    }
    
    // Función que devuelve los datos de los elementos hijos de un nodo.
    function muestraArbol()
    {
        var txt = "";
        
        // Comprueba si existen nodos.
        if (nodeTree.length > 0)
        {
            // Recorre los nodos.
            for (var i = 0; i < nodeTree.length; i++)
            {   
                txt += "<ul><li>Nodo: " + nodeTree[i].node + "</li>";
                txt += "<li> Padre: " + nodeTree[i].parent + "</li>";
                txt += "<li>Contenido: " + nodeTree[i].content + "</li>";
                txt += "</ul>";
            }
            document.write(txt);
        }
        else
        {
            document.write("<h1>No existen nodos en el DOM.</h1>");
        }
    }   
};

Does anyone es up how to draw a nested tree to glance at the parent and child nodes you distinguish?

Share Improve this question edited Jul 13, 2023 at 2:58 starball 52.5k32 gold badges217 silver badges905 bronze badges asked Jan 27, 2016 at 16:28 JSGarcia 5667 silver badges19 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

You have a recursive DOM reader, but you also need a recursive outputter. You're also dealing with a one dimensional array when you need a multi-level object (tree).

We'll start with refactoring getNodeTree. Instead of adding to a global array (nodeTree in your code), let's have it return a tree:

function getNodeTree (node) {
    if (node.hasChildNodes()) {
        var children = [];
        for (var j = 0; j < node.childNodes.length; j++) {
            children.push(getNodeTree(node.childNodes[j]));
        }

        return {
            nodeName: node.nodeName,
            parentName: node.parentNode.nodeName,
            children: children,
            content: node.innerText || "",
        };
    }

    return false;
}

Same for muestraArbol (for our monolingual friends out there, it means "show tree"): We'll have it work recursively and return a string containing nested lists:

function muestraArbol (node) {
    if (!node) return "";

    var txt = "";

    if (node.children.length > 0) {
        txt += "<ul><li>Nodo: " + node.nodeName + "</li>";
        txt += "<li> Padre: " + node.parentName + "</li>";
        txt += "<li>Contenido: " + node.content + "</li>";
        for (var i = 0; i < node.children.length; i++)
            if (node.children[i])
                txt += "<li> Hijos: " + muestraArbol(node.children[i]) + "</li>";
        txt += "</ul>";
    }

    return txt;
}

Finally, if we put it together in a snippet:

var nodeTree = getNodeTree(document.documentElement);
console.log(nodeTree);

function getNodeTree(node) {
    if (node.hasChildNodes()) {
        var children = [];
        for (var j = 0; j < node.childNodes.length; j++) {
            children.push(getNodeTree(node.childNodes[j]));
        }

        return {
            nodeName: node.nodeName,
            parentName: node.parentNode.nodeName,
            children: children,
            content: node.innerText || "",
        };
    }

    return false;
}

function muestraArbol(node) {
	if (!node) return "";
    
    var txt = "";
	
    if (node.children.length > 0) {
        txt += "<ul><li>Nodo: " + node.nodeName + "</li>";
        txt += "<li> Padre: " + node.parentName + "</li>";
        txt += "<li>Contenido: " + node.content + "</li>";
        for (var i = 0; i < node.children.length; i++)
        	if (node.children[i])
            	txt += "<li> Hijos: " + muestraArbol(node.children[i]) + "</li>";
        txt += "</ul>";
    }

    return txt;
}


document.getElementById("muestra_abol").addEventListener("click", function() {
    document.getElementById("result").innerHTML = muestraArbol(nodeTree);
});

<title>Formulario para validar</title>

<body>
    <p>Primer texto que se visualiza en la Pagina</p>
    <div>Esto es un div</div>
    <div>Otro div que me encuentro</div>
    <p>Hay muchos parrafos</p>
    <ul>
        <li>Lista 1</li>
        <li>Lista 2</li>
        <li>Lista 3</li>
    </ul>
    <button type="button" id="muestra_abol">Muestra Arbol DOM</button>
    <div id="result"></div>
</body>

Finally: My apologies, for my Spanish-JavaScript reading skills are not in their prime. :)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Get DOM tree with javascript - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)