Generando un árbol con los nodos...

mesoriginal · #1 (**permalink**) 07/12/2011, 12:11

Hola,

Estoy viendo este site:

http://www.pepemolina.com/DOM/index.html

En donde cuentan como generar un arbol de un site cualquiere a traves de ese codigo:

Código Javascript:

Ver original<script language="javascript" >
       function leerNodos(raiz, lugar)  {
        var soy = document.createElement("div");
        soy.style.marginLeft = "1cm";
        var yo = document.createTextNode(raiz.nodeName);
        soy.appendChild(yo);
        var hijos = raiz.childNodes;
        lugar.appendChild(soy);
        if (hijos.length > 0)
           for (var i = 0; i < hijos.length; i ++)
              if (hijos[i].nodeType == 1)
                leerNodos(hijos[i], soy);
              else  {
                var DatosHijo = document.createTextNode(hijos[i].nodeName + " : " + hijos[i].nodeValue);
                var elHijo = document.createElement("div");
                elHijo.style.marginLeft = "1.3cm";
                elHijo.appendChild(DatosHijo);
                lugar.appendChild(elHijo);
              }
       }
 
       function mostrar()   {
        var colgar = document.getElementById("arboleda");
        while (colgar.childNodes.length != 0)
           colgar.removeChild(colgar.childNodes[0]);
        var x = document.createElement('div'); 
        leerNodos(document.documentElement, x);
        document.getElementById("arboleda").appendChild(x);
       }
    </script>

Código HTML:

<body>
     <h1 style="background-color: #eeeeee; color: blue; text-align: center;">
     	Árbol
     </h1>
     <div style="border-width: 2; border-style: none none solid none; border-color: blue;">
     	<p style="text-indent: 1cm; margin: 0px auto 0px auto">
     	   Este es un simple ejemplo de generación de un árbol de nodos dentro de un documento...
     	</p>
     	<br />
     </div>
     	<form style="text-align: center; border-width: 2; border-style: none none solid none; border-color: blue;"
     	 action="javascript: mostrar()">
     	<br/>
     	<input type="submit" value="Generar árbol" style="display:block;" />
     	<br />
     </form>
     <br />
     <div id=arboleda>
     </div>
  </body>

Quisiera saber si se tienen que cambiar las variables raiz y lugar. Si es que es lo que tiene que ir? Ademas yo no empiezo por el html sino que empiezo por el BODY.

Alguan ayuda?

zerokilled · #2 (**permalink**) 07/12/2011, 12:31

buenas,
la función leerNodos en si sola es genérica. es decir, esta adaptado para que tu puedas indicar desde cual elemento analizar y dónde generar el árbol. por tanto, cuando invoques la función, debes proveer esos parámetros. fíjate como inicialmente se invoca la función leerNodos dentro de la función mostrar. en fin, no tienes que hacerle ningún cambio a la función a no ser que quieras adaptarle algo adicional.

mesoriginal · #3 (**permalink**) 07/12/2011, 13:14

Ahà si me funciona es decir sobre una pàgina html.

Código HTML:

<html>
<head> 
     <title></title>
</head>
<body>

<div>
     <h1>TEXTO1</h1>
     <p>TEXTO2</p>
</div>

</body>
</html>

Modifiqué el codigo para que en vez de empezar por el html como raiz empezara por el body y ya funciona asi que me tira lo siguiente:

Código HTML:

BODY
DIV
#text : TEXTO1
P
#text : TEXTO2
#text :
#text :
#text :
#text :

Lo que quiero es poder meter en un array todo el contenido de los DIV que me encuentre y de los <P>.

zerokilled · #4 (**permalink**) 07/12/2011, 13:31

para eso puedes usar el metodo getElementsByTagName. por supuesto, con dicha función solo obtendrás las referencias a los elementos. si quieres obtener el contenido, tienes que iterar la colección y accesar a la propiedad innerHTML o cualquier equivalente.

mesoriginal · #5 (**permalink**) 07/12/2011, 13:52

Tendrias algun ejemplo para darme alguna ayuda?

zerokilled · #6 (**permalink**) 07/12/2011, 14:06

en pseudo-código

Código:

SET elem TO getelementsbytagname(tagname)
SET content TO ""
FOR i = 0 TO length(elem)
	APPEND elem(i).innerHTML TO content

mesoriginal · #7 (**permalink**) 09/12/2011, 10:03

El SET para que lo pones exactamente? Solo tendriamos que guardar en un array() todo el contenido de las <p> y el contenido de los <h1>.

mesoriginal · #8 (**permalink**) 09/12/2011, 10:19

Como hacer esto:

var p = document.getElementsByTagName('P')[0].innerHTML;

Para todos los parrafos y guardarlos en un array()?

zerokilled · #9 (**permalink**) 09/12/2011, 10:40

Cita:

El SET para que lo pones exactamente?

es un pseudocódigo, el cual no intenta ser el código final sino un lenguaje intermedio para demostrar la estructura logística. SET significa "asignar a"; en el pseudocódigo, asignar a la variable "elem". fijate como esta la estructura, antes de obtener el contenido primero se invoca el método indicando el nombre del elemento. en tu caso estas invocando y accesando al primer elemento. precisamente, getElementsByTagName te devuelve un array.

mesoriginal · #10 (**permalink**) 09/12/2011, 12:19

Código Javascript:

Ver originalfunction listP(){
 
        var p = document.getElementsByTagName("p");
 
        var pValues = new Array();
        for(var i=0; i < p.length; i++)
        {
                pValues[i] = p[i].innerHTML;
        }
        
        console.log(pValues);
    }
    
    listP();

Con esto consigo crear un array con todas las P pero como hago para integrarlo en el codigo recursivo del Inspector DOM:

http://www.pepemolina.com/DOM/index.html

Saludos!

zerokilled · #11 (**permalink**) 09/12/2011, 13:27

lo que no logro comprender es qué es lo que te tiene aferrado al script de caricatos. quiero decir, ¿qué es lo que quieres hacer que tanto necesitas dicho script pudiendolo hacer con funciones nativas como getElementsByTagName? en todo caso, mi recomendación es que utilices un código más genérico para recorrer los elementos al cual le puedas pasar una función donde tú indiques la tarea a realizar. no suele suceder muy a menudo pero he aquí mi versión.

Código:

function Traverser(node, callback){
	while(node){
	if(node.hasChildNodes()) Traverser(node.firstChild, callback);
	var _node = node.nextSibling;
	callback(node);
	node = _node;
	}
}

digamos por ejemplo que quiero capturar todos los nodos tipo Text y Comment.

Código:

var text_comment = [];
Traverser(document, function(node){
if(node.nodeType == 3 || node.nodeType == 8) text_comment.push(node);
});

otro ejemplo, eliminar todos los nodos Text de un elemento particular.

Código:

Traverser(document.getElementById('foo'), function(n){
if(n.nodeType == 3) n.parentNode.removeChild(n);
});

en fin, en el callback debes proveer una función con lo que tu quieras hacer con el nodo en iteración.

mesoriginal · #12 (**permalink**) 12/12/2011, 09:08

Perfecto! =) Asi imagino que la funcion Traverser lo que hace es recorrer la DOM de cualquier pagina web?

Y en la funcion pondriamos la condicion para cuando se encuentre en dicha posicion de la DOM, verdad?

El codigo de caricatos en principio no estoy aferrado a el solo que de los que encontre por la red era el que hacia algo parecido a lo que yo queria hacer.

Ahora bien si de una pagina quiero guardar en una misma variable como bien hiciste con la variable "text_comment" como podria yo guardar en una variable "parrafos" todo aquello que tenga SÓLO las siguientes estructuras:

1-
<div>
<hX>Titulo</hX>
<p>blalablablablabla</p>
</div>

2-
<p>blablablabla</p>

No se si me explique bien...Es decir la funcion que tengo que construir en Traverser() que de algun modo algo similiar a la funcion que publiqué de listP()

Código Javascript:

Ver originalfunction listP(){
 
        var p = document.getElementsByTagName("p");
 
        var pValues = new Array();
        for(var i=0; i < p.length; i++)
        {
                pValues[i] = p[i].innerHTML;
        }
        
        console.log(pValues);
    }
    
    listP();

Muchisimas gracias!

Saludos!

mesoriginal · #13 (**permalink**) 12/12/2011, 11:38

Bueno veo que tu funcion es similar a la de:

https://gist.github.com/958000

Como hago en la funcion para acceder SOLO a los contenidos de las P.

Código HTML:

Ver originalP:null
#text:Tsjklpdsokdmnsojñndksjn oldn sjkldn sjkldnslkdnsjkl njklsdn jklsndjksndsjklds .

Si te fijas si apunto a P evidentmente tiene un valor vacio. Lo que quisiera hacer és apuntar a #text a ver si podeis ayudarme =)

Muchas gracias.