Uso del DOM

El Document Object Model(DOM), es una forma de representar los elementos de un documento estructurado ej. (X)HTML como objetos que tienen sus propios métodos y propiedades.

Importancia del DOM

En Javascript es habitual:

- Obtener el valor almacenado por algunos elementos.

- Crear y Eliminar un elemento de forma dinámica y añadirlo al documento.

- Manipulación interactiva de contenidos.

- Flexibilidad ilimitada.

Una página (X)HTML no es más que una sucesión de caracteres.

- DOM transforma todos los documentos (X)HTML 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.

Reglas para la transformación de la página en sus nodos.

• Las etiquetas HTML se transforman en 2 nodos:

- Propia etiqueta.

- Contenido textual de la etiqueta.

• Si un etiqueta es hija de otra se sigue el procedimiento anterior, siendo hijos de su nodo padre.

Tipos de nodos

1. Document:Nodo raíz del que derivan los demás nodos del árbol.

2. Element:Representa cada una de las etiquetas HTML, único nodo que contiene atributos y del que derivan otros nodos.

3. Attr:Se define un nodo de este tipo por cada atributo de una etiqueta HTML.

4. Text:Nodo que contiene el texto encerrado por una etiqueta HTML.

Características del DOM

Por su aspecto a la unión de todos los nodos se le llama “árbol de nodos.”

Consideraciones del árbol del DOM

- Cada rectángulo representa un nodo del DOM.

- Dentro de cada nodo se ha incluido su tipo y su contenido.

- A partir del nodo raíz cada nodo se transforma en un nodo de tipo Element.

- Cada etiqueta HTML genera dos nodos, el primero es el nodo de tipo Element correspondiente a la etiqueta y el segundo es un nodo de tipo texto que contiene el texto encerrado por esta.

- La raíz del árbol de nodo de cualquier documento HTML es del tipo Documento.

Acceso a los nodos

DOM proporciona dos métodos:

-Acceso a través de los nodos padres.

-Acceso directo.

Acceso a través de los nodos padres

document.formName.elements[index]

document.forms[index].elementName

Acceso directo

• Se utilizan funciones que permiten acceder directamente al elemento en cuestión.

– getElementsByTagName().

– getElementsByName().

– getElementById().

Resumen

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.

Fuentes

Introducción a JavaScript, capítulo 5, pág 51-61