Desarrollo de Entornos Web

 EL MODELO DE OBJETO DE DOCUMENTO

EL DOM

El Modelo de Objetos del Documento (DOM) permite ver el mismo documento de otra manera, describiendo el contenido del documento como un conjunto de objetos que un programa Javascript puede actuar sobre ellos.

Una de las tareas habituales en la programación de aplicaciones web con JavaScript consiste en la manipulación de las páginas web. De esta forma, es habitual obtener el valor almacenado por algunos elementos (por ejemplo los elementos de un formulario), crear un elemento (párrafos, <div>, etc.) de forma dinámica y añadirlo a la página, aplicar una animación a un elemento (que aparezca/desaparezca, que se desplace, etc.).

Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Sin embargo, para poder utilizar las utilidades de DOM, es necesario "transformar" la página original. Una página HTML normal no es más que una sucesión de caracteres, por lo que es un formato muy difícil de manipular. Por ello, los navegadores web transforman automáticamente todas las páginas web en una estructura más eficiente de manipular.

La siguiente página HTML sencilla:

Se transforma en el siguiente árbol de nodos:

En el esquema anterior, cada rectángulo representa un nodo DOM y las flechas indican las relaciones entre nodos. Dentro de cada nodo, se ha incluido su tipo (que se verá más adelante) y su contenido.

La raíz del árbol de nodos de cualquier página HTML siempre es la misma: un nodo de tipo especial denominado "Documento".

A partir de ese nodo raíz, cada etiqueta HTML se transforma en un nodo de tipo "Elemento". La conversión de etiquetas en nodos se realiza de forma jerárquica. De esta forma, del nodo raíz solamente pueden derivar los nodos HEAD y BODY. A partir de esta derivación inicial, cada etiqueta HTML se transforma en un nodo que deriva del nodo correspondiente a su "etiqueta padre".

Así, la siguiente etiqueta HTML:

<title>Página sencilla</title>

Genera los siguientes dos nodos:

Genera los siguientes nodos:

 Nodo de tipo "Elemento" correspondiente a la etiqueta <p>.

 Nodo de tipo "Texto" con el contenido textual de la etiqueta <p>.

 Como el contenido de <p> incluye en su interior otra etiqueta HTML, la etiqueta interior se transforma en un nodo de tipo "Elemento" que representa la etiqueta <strong> y que deriva del nodo anterior.

 El contenido de la etiqueta <strong> genera a su vez otro nodo de tipo "Texto" que deriva del nodo generado por <strong>.

Como se puede suponer, las páginas HTML habituales producen árboles con miles de nodos. Aun así, el proceso de transformación es rápido y automático, siendo las funciones proporcionadas por DOM las únicas que permiten acceder a cualquier nodo de la página de forma sencilla e inmediata.

Decimos que una página web es un documento HTML. Este documento puede ser representado de diferentes maneras:

a) Representación web: como una página web en un navegador donde vemos imágenes, texto, colores, etc.

b) Representación texto: como un texto plano (código HTML) que podemos visualizar en cualquier editor de textos como el bloc de notas de Windows o Notepad++ o cualquier otro.

c) Representación DOM: como un árbol donde los elementos de la página web están organizados jerárquicamente, con nodos superiores (nodos padre o parent) y nodos que derivan de los nodos padre (nodos hijo o child).

Veamos un ejemplo de representación DOM:

La anterior representación se corresponde con la representación del documento como texto. La imagen que vemos en el navegador se corresponde con la representación del documento como página web en un navegador.