Hola amigos: Esta página pretende ser un caso de estudio sobre el árbol de nodos de una página html .
Se trata de un sistema de marcos, donde en el de la izquierda se puede visualizar el contenido (en formato de árbol de nodos) de la página que se ve a la derecha.
Una cosa a destacar en ésta página es el distinto tratamiento de los nodos de una página que hacen los distintos navegadores. En los navegadores basados en Mozilla se generan nodos "vacíos" si entre 2 etiquetas html hay un salto de línea o un espacio en blanco.
Sobre los elementos que se generan se pueden ver del tipo Element (Elemento) que se muestra con el nombre de la etiqueta, y los nodos de texto y comentario (#text y #comment). Los "Elementos" pueden estar precedidos por un signo "+" (o "-") si a su vez tienen subNodos.
Al pinchar sobre el "+" o el "-" se despliega o pliega el subárbol asociado.
Pinchando sobre el nombre de la etiqueta, ésta se resalta en la página principal alternando entre el fondo que tuviese el elemento, y un fondo rojo.
Junto al nombre de la etiqueta, se muestra entre paréntesis los atributos que tiene. Se puede observar que explorer muestra tanto los atributos definidos como los que no. Pinchando sobre ese elemento, se despliega una ventana emergente con esa lista de atributos, pudiéndose modificar... (cambiando el valor y pulsando el botón actualizar).
También se puede distinguir un asterisco en las etiquetas que pueden tener estilos. Pinchando sobre ese elemento aparece una ventana emergente con los estilos definidos "inline".
Por último, si pinchamos sobre los elementos precedidos por "#" (#text o #comment), se muestra una alerta con el valor del nodo (nodeValue).
Todos los nodos se presentan con el valor de su "nodeName".
Para generar el árbol hemos necesitado del nodo de comienzo, y una capa dondo mostrar el resultado. Para recorrer todos los nodos es conveniente un procedimiento recursivo, ya que no es posible saber la profundidad que pueden tener las páginas.
El nodo raiz de toda página html es document.documentElement, y los hijos de cada nodo se identifican con una colección (array) que se llama childNodes (nodos hijos). Como todos loa arrays tienen la propiedad length (tamaño) que es un valor entero >= 0.
De los tipos de nodos vamos a referirnos a los que representan etiquetas (nodeType=1), los nodos de texto (nodeType=3) y los nodos de comentario (nodeType=8).
Para cada elemento del tipo 1 debe hacerse una llamada recursiva, creándose una capa nueva para poder colgar el resultado.
En el recuadro que sigue se puede ver un código simplificado de un generador de nodos en la misma página.
<html>
<head>
<title>
Árbol de nodos
</title>
<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>
</head>
<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>
</html>
Si quiere ver la página que genera ese código, pinche en el siguiente botón:
Para obtener la lista de atributos, todas las etiquetas tienen asociados los atributos en forma de array o colección: attributes con la posibilidad de leerlos a partir de un índice.
Cada uno de estos elementos "objetos" consta de dos propiedades: el nombre (name) y el valor (value).
Un sencillo script para obtener los atributos de un elemento sería:
<script language="javascript" >
// Este ejemplo muestra los elementos attribute del elemento body...
elemento = document.body;
for (var i = 0; i < elemento.attributes.length; i ++)
window.writeln("<br>" + elemento.attributes[i].name + " = " + elemento.attributes[i].value);
<script>
Nota: En el recuadro de abajo se puede seleccionar otra página para "Inspeccionar", pero es posible que se "deniegue" el acceso a ésta, provocando un error.
Puede ver el
.. o si quiere estudiar el código...