Curso Diseño y Programación Páginas Web: Introducción a la Programación con Javascript
El DOM
Una de las funcionalidades principales de Javascript es su capacidad para interactuar y manipular los elementos de una página web gracias al DOM. Si tras esta frase te has quedado un poco en blanco, vamos a tratar de explicarlo a continuación.
¿Qué es el DOM?
Es el acrónimo de Document Object Model ó Modelo del Objeto Documento. Muy bien, ¿y eso qué es? Pues primero daremos una definición más técnica, para luego ir desarrollándola de forma que podamos entenderlo.
El DOM es una API, o lo que es lo mismo, una Interfaz de Programación de Aplicaciones.
Interfaces:
Aunque la anterior definición te ha podido sonar extraña, piensa en las interfaces que utilizas en tus programas habituales, por ejemplo en un procesador de textos o en el navegador. Allí tienes una serie de botones y menús que te permiten comunicarte con esa aplicación y darle instrucciones para realizar determinadas tareas: resaltar un texto en negrita, abrir un nuevo fichero, ir a la página anterior….. Igualmente a través de ese interfaz la aplicación ‘dialoga’ contigo mostrándote mensajes o pidiéndote que introduzcas alguna información (por ejemplo elegir el fichero que vas a abrir o con qué nombre lo quieres guardar).
Pues bien, al igual que existen las interfaces ‘persona-aplicación‘ (o ‘persona-programa’, utilizamos indistintamente ambos nombres) también tenemos las API, que serían las interfaces ‘aplicación-aplicación‘ (ó ‘programa-programa‘). En este caso, la aplicación en vez de presentar botones o menús para que los seleccione una persona, expone métodos que pueden ser llamados por cualquier programa, y a los que incluso puede pasar valores (argumentos) para realizar determinadas tareas (en argot técnico se suele emplear el término ‘exponer’ para indicar que un método está disponible para ser llamado desde ‘fuera’, por ejemplo desde otra parte del programa o incluso desde otro programa distinto)
¿Para qué sirve entonces una API? Básicamente para facilitar la comunicación entre programas de forma automática. En este caso concreto, el DOM permite que desde un programa Javascript podamos acceder a cualquiera de los elementos de la página HTML (párrafos, enlaces, imágenes, etcétera, además de los atributos o texto de esos elementos) y manipularlos. Para ello, tan solo debemos conocer que métodos (funciones) tenemos disponibles y de qué forma debemos llamarlos. Por ejemplo, con un script podríamos seleccionar un párrafo de una página web y cambiar el texto que contiene o añadirle una nueva clase al atributo ‘class’. Volveremos sobre ésto, pero antes vamos a seguir describiendo el DOM para comprenderlo mejor.
El DOM, representa la página HTML y sus diferentes partes en una especie de organigrama con un conjunto de nodos dispuestos de forma jerárquica. Estos nodos son los elementos HTML de la página, es decir, si un ‘párrafo’ está contenido en un ‘div’, estará enlazado a él en un nivel inferior como puede verse en la imagen. También consideramos nodos a los atributos (‘class’, ‘style’, ‘src’….) o los textos que pueda haber en los elementos HTML. Otra imagen habitual para describir el DOM es compararlo con un árbol que se va ramificando en ditintos niveles y en donde las hojas son los elementos que tiene la página.
Abajo podemos ver la imagen de un DOM simplificado. Como se aprecia, se suele representar esa estructura de árbol de forma invertida, situando arriba al objeto del documento (‘document’), conteniendo a todos los demás.
Pues bien, todos esos nodos, es decir, los elementos de la página web, son tratados como objetos, un concepto que ya presentamos en un apartado anterior.
Antes de explicar un poco más en esta última frase y algunas cuestiones que nos quedan por presentar respecto al DOM, vamos a ver un ejemplo concreto que nos puede dar una idea mejor de lo que estamos explicando.
Ejemplo
Vamos a suponer que publicamos un periódico online y tenemos el siguiente extracto HTML de la portada que corresponde a una noticia de última hora:
|
1 2 |
<h2 id="urgente">Incendio en el Parque Nacional de Picos de Europa</h2> <p>En la noche de ayer, se declaró un incendio cuyas causas se desconocen aún, en la zona denominada.....</p> |
supongamos que esa noticia va adquiriendo más importancia y queremos destacarla. En vez de modificar la página HTML, podemos agregar el siguiente código Javascript a un fichero «.js» enlazado con esta página:
|
1 2 3 4 |
<script> var urgente = document.getElementById("urgente") ; urgente.style.fontSize = "2.0em"; </script> |
para verlo en este ejemplo, simplemente copia primero la parte de HTML en el editor y ve el resultado. A continuación, pega debajo del HTML, sin borrarlo, la parte del script y comprueba como cambia la presentación del encabezamiento.
Sin haber editado la página HTML ni la hoja CSS, hemos provocado una modificación con Javascript en la presentación de la página web, cambiando uno de los estilos asociados a ese elemento gracias a las posibilidades que nos ofrece el DOM. En este caso concreto hemos hecho lo siguiente:
- Hemos accedido al párrafo seleccionándolo con document.getElementById("urgente") , siendo ‘getElementById‘ uno de los métodos que nos expone (ofrece) el DOM y al que hemos pasado un argumento, «urgente», para identificarlo. Explicaremos más sobre este método más adelante.
- Hemos modificado el estilo del tamaño de letra, asignándole un nuevo valor con la instrucción urgente.style.fontSize = "2.0em" . La estructura general para cualquier elemento HTML y propiedad CSS sería: «elemento.style.propiedad« (ver nota)
Esperamos que el ejemplo anterior te haya permitido vislumbras las posibilidades que nos ofrece Javascript a través del acceso que le proporciona el DOM a la página HTML. Hay numerosas aplicaciones para ésto, como que al pinchar un botón se muestre o se oculte un bloque de información, o que al pasar el ratón por encima de una imagen, ésta se presente en un tamaño más grande bajo un fondo distinto. Son solo dos muestras de todo el potencial que encierra para dar interactividad y dinamismo a nuestras páginas.
Nota: hay que tener cuidado, porque puede haber pequeñas diferencias entre la escritura de la propiedad CSS (font-size) y el nombre de la propiedad en el objeto style (fontSize) al que accede Javascript. Puedes ver la lista completa comparando ambos nombres en este artículo
Objetos del DOM
Vamos a seguir ampliando nuestra explicación sobre el DOM, retomando la última frase en la que indicábamos que el DOM trataba a todos los elementos como objetos.
Mientras HTML pertenece a la familia de los lenguajes de marcado, el DOM es de la familia de la Programación Orientada a Objetos (POO).
- En HTML tenemos elementos que pueden contener atributos con unos determinados valores. Por ejemplo, un elemento párrafo <p> que tiene el atributo de identificación ‘id’ con un valor ‘inicial‘:
<p id=”inicial”> - En el DOM esos elementos y atributos se convierten en objetos y los valores de esos atributos son propiedades. Todo ello puede ser manipulado por un lenguaje de programación a través del DOM (Javascript entre ellos), con métodos que pueden ser llamados por ese lenguaje para crear, eliminar o alterar dichos objetos. Es decir, podríamos eliminar ese párrafo, o modificarle el valor de su atributo ‘id’, o el texto que contiene ese párrafo, o incluso crear un párrafo nuevo delante o detrás de éste.
El navegador cuando ‘lee’ la página HTML, además de presentarla en la pantalla, construye un DOM. Este es una especie de organigrama o mapa que proporciona a Javascript un interfaz, es decir, una manera de interaccionar con esos objetos y propiedades a través de métodos (funciones) que pueden manipularlos dinámicamente.
Además, el DOM le proporciona otra intefaz para trabajar con eventos, concepto que ya presentamos en el apartado anterior. Es decir, permite a JavaScript capturar cambios que se producen en el navegador o provocados por el usuario (cargar una página, pinchar un enlace o un botón,….) y dar una respuesta realizando cualquier tipo de acción (mostrar un mensaje, ocultar una sección…). Veremos en la página siguiente algunos ejemplos de eventos asociados a elementos que seleccionamos del DOM.
En definitiva, en HTML el párrafo es una etiqueta descriptiva, un elemento estático, pero con JavaScript podemos acceder a ellos y cambiar su contenido, aplicarle estilos de presentación, eliminar o crear unos nuevos, modificando incluso la estructura de la página.
No vamos a tratar a fondo en el curso la interacción con el DOM, porque va más allá de sus objetivos, pero eso no impide el que podamos aplicar en la práctica algunos de los métodos más usados del objecto ‘Document’, provocando algunos cambios a nuestra página HTML de forma dinámica con Javascript. En la siguiente página te hablaremos de ello.