Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/12/2011, 12:11
mesoriginal
 
Fecha de Ingreso: septiembre-2008
Mensajes: 211
Antigüedad: 16 años, 3 meses
Puntos: 2
Generando un árbol con los nodos...

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
  1. <script language="javascript" >
  2.        function leerNodos(raiz, lugar)  {
  3.         var soy = document.createElement("div");
  4.         soy.style.marginLeft = "1cm";
  5.         var yo = document.createTextNode(raiz.nodeName);
  6.         soy.appendChild(yo);
  7.         var hijos = raiz.childNodes;
  8.         lugar.appendChild(soy);
  9.         if (hijos.length > 0)
  10.            for (var i = 0; i < hijos.length; i ++)
  11.               if (hijos[i].nodeType == 1)
  12.                 leerNodos(hijos[i], soy);
  13.               else  {
  14.                 var DatosHijo = document.createTextNode(hijos[i].nodeName + " : " + hijos[i].nodeValue);
  15.                 var elHijo = document.createElement("div");
  16.                 elHijo.style.marginLeft = "1.3cm";
  17.                 elHijo.appendChild(DatosHijo);
  18.                 lugar.appendChild(elHijo);
  19.               }
  20.        }
  21.  
  22.        function mostrar()   {
  23.         var colgar = document.getElementById("arboleda");
  24.         while (colgar.childNodes.length != 0)
  25.            colgar.removeChild(colgar.childNodes[0]);
  26.         var x = document.createElement('div');
  27.         leerNodos(document.documentElement, x);
  28.         document.getElementById("arboleda").appendChild(x);
  29.        }
  30.     </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?