Mapa DOM

DOM

DOM significa Document Objet Model, y viene a traducirse más o menos como: modelo del objeto documento. Se trata de una de las de las características con mayor influencia en el diseño dinámico de páginas web ya que permite manejar de forma sencilla las páginas.

Si bien existen hasta 12 tipos de nodos, para manipular mediante DOM nuestras páginas nos basta con los que detallamos a continuación:

Texto

Documento

Atributo

Elemento

Es el principal, de él partirán todos los demás nodos que componen nuestra página. También le podemos llamar nodo raíz.

Existirá uno por cada una de las etiquetas de HTML. De él pueden derivarse otros nodos.

Representa los atributos de HTML.

Representa el texto de la página.

A partir del árbol generado por DOM podemos comenzar a acceder directamente a cada uno de sus nodos y manipularlos para hacer cambios en nuestra página de forma dinámica. Por ejemplo, podríamos querer añadir a nuestro árbol nuevos elementos.

Cada uno de los nodos puede ser accedido de dos formas:

- A través del nodo padre: desde el nodo raíz, indicando toda la sucesión de nodos dependientes de él hasta llegar al nodo en particular

- Mediante acceso directo: que como es de suponer resulta más sencillo y por lo tanto será del que nos ocupemos en este manual.

- Las funciones más utilizadas para acceso directo a los nodos son:

- ElementsByTagName(): se obtiene un array con todos los nodos con una etiqueta HTML determinada de la página. Por ejemplo: misParrafos=document.getElementsByTagName(“p”); nos daría todas las etiquetas <p>, es decir todos los párrafos de nuestra página.

Una vez accedido el nodo, lo habitual es que queramos modificar sus atributos y propiedades. En concreto, podemos cambiar los atributos HTML y CSS de las páginas ya que estos se transforman en propiedades de los nodos.

Manejo de los Atributos