Objetivo m6a55
Identificar las principales características del Modelo de Objetos del Documento (DOM) en HTML.
Lecturas propuestas 3g6320
- ¿Qué es DOM y cómo es su estructura?.
- Funciones más comunes del DOM.
- Métodos y propiedades DOM HTML.
¿Qué es Dom? 4qb4r
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 6z4v
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>
Tipos de Nodos 4v3e6b
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 6q3qn
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.)
