Árbol de nodos

Para lograr una página HTML que sea dinámica, debemos actuar a traves de java script con el DOM de la misma.
DOM transforma todos los documentos XHTML en un conjunto de elementos llamados nodos, que están interconectados y que representan los contenidos de las páginas web y las relaciones entre ellos.
La unión de todos los nodos se llama "árbol de nodos".
Veamos esta página XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Explicación DOM</title> </head> <body> <p>Explico el<strong> Árbol de Nodos</strong></p> </body> </html> dom
Este árbol de nodos es generado automáticamente por DOM a partir del
código XHTML de la página
Cada rectángulo representa un nodo DOM y las flechas muestran las relaciones entre nodos.
Dentro de cada nodo, se ha incluido su tipo . La raíz del árbol de nodos de cualquier página XHTML siempre es la misma: un nodo de tipo especial denominado "document". A partir de ese nodo raíz, cada etiqueta XHTML se transforma en un nodo de tipo "element".
La conversión de etiquetas en nodos se realiza de forma jerárquica.
Del nodo raíz solamente pueden derivar los nodos HEAD y BODY.

Tipos de nodos

DOM define 12 tipos de nodos, aunque las páginas XHTML normalmente pueden
manipular solamente cuatro o cinco tipos de nodos:
document, nodo raíz del cual derivan todos los demás nodos del árbol.
element, representa cada una de las etiquetas XHTML.
Se trata del único nodo que contiene atributos y del que pueden derivar otros nodos.
attr, se usa para representar cada uno de los atributos de las etiquetas XHTML,
es decir, uno por cada par atributo=valor.
text, nodo que contiene el texto encerrado por una etiqueta XHTML.
comment, representa los comentarios incluidos en la página XHTML.
Los otros tipos de nodos son son
DocumentType, CDataSection, DocumentFragment, Entity, EntityReference, ProcessingInstruction y Notation.

Ejemplo 1

Ejemplo 2

Bajar el archivo de texto con el código completo

Volver