Uso del DOM

Document Object Mode Concepto: Forma de representar los elementos de un documento estructurado

Document Object Mode (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

• Document:Nodo raíz del que derivan los demás nodos del árbol.
• Element:Representa cada una de las etiquetas HTML, único nodo que contiene atributos y del que derivan otros nodos.
• Attr:Se define un nodo de este tipo por cada atributo de una etiqueta HTML.
• 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