Objetivo
Identificar las principales características del Modelo de Objetos del Documento (DOM) en HTML.
Lecturas propuestas
¿Qué es Dom?
La creación del Document Object Model o DOM es una de las innovaciones que más ha influido en el desarrollo de las páginas web dinámicas y de las aplicaciones web más complejas.
A pesar de sus orígenes, DOM se ha convertido en una utilidad disponible para la mayoría de lenguajes de programación (Java, PHP, jаvascript) y cuyas únicas diferencias se encuentran en la forma de implementarlo.
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.
Por su aspecto, la unión de todos los nodos se llama “árbol de nodos”.
Árbol de Nodos
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.
DOM transforma todos los documentos HTML en un conjunto de elementos llamados nodos, los cuales están interconectados y representan los contenidos de las páginas web y las relaciones entre ellos. Por su aspecto, la unión de todos los nodos se llama “árbol de nodos”.
La transformación de las etiquetas HTML habituales genera dos nodos: el primero es el nodo de tipo “Elemento” (correspondiente a la propia etiqueta HTML) y el segundo es un nodo de tipo “Texto” que contiene el texto encerrado por esa etiqueta HTML. Así, la siguiente etiqueta HTML:
<title>Página sencilla</title>
Genera los siguientes dos nodos:
Elemento <title> y Texto Página sencilla<p>Esta página es <strong>muy sencilla</strong></p>
Figura 1. Árbol de nodos del ejemplo anterior.
Tipos de Nodos
La especificación completa de DOM define 12 tipos de nodos, aunque las páginas HTML habituales se pueden manipular manejando solamente cuatro o cinco tipos de nodos:
▪ Document, nodo raíz del que derivan todos los demás nodos del árbol.
▪ Element, representa cada una de las etiquetas XHTML. Se trata del único nodo
que puede contener atributos y el único del que pueden derivar otros nodos.
▪ Attr, se define un nodo de este tipo 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.
Usos más comunes del DOM
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.)
Comentarios