Qué es DOM API (y cómo usarla para escribir JavaScript para la web)?

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Durante muchos años nos hemos apoyado en bibliotecas JavaScript de terceros como por ejemplo jQuery con las que escribir JavaScript para la web. Sin embargo, en años recientes, DOM API ha evolucionado muchísimo, de modo que añadir funcionalidad dinámica a las páginas web por medio de JavaScript nativo está siendo mucho más sencillo para los desarrolladores.

Este tutorial sobre el DOM y JavaScript es una visión general de alto nivel sobre la DOM API que incluye todo navegador actual. Veremos qué es DOM API, cuál es su relación con JavaScript, y cómo puedes usarla para escribir JavaScript para la web.

¿Qué es el DOM?

DOM es el acrónimo de Document Object Model (Modelo de la estructura del documento), y es la representación de los datos de un documento web, por ejemplo, una página HTML, un gráfico SVG, o un archivo XML.

En palabras simples, el DOM es un conjunto de objetos (Modelo de objeto de documento) que constituye una página web. Cada objeto es la implementación en el mundo real de una interfaz, es el modelo que describe qué aspecto debería tener un objeto. Por tanto, la totalidad de una interfaz puede estar constituida por medio de múltiples objetos.

Por ejemplo, cada elemento HTML <form> está representado por un objeto HTMLFormElement en el DOM, el cual es una implementación de la interfaz HTMLFormElement. Esta interfaz viene con propiedades pre-escritas (variables de interfaz) y métodos (funciones de interfaz) que puedes utilizar para añadir funcionalidad dinámica a cada objeto formulario (que aparece en forma de etiqueta <form> en el documento HTML). De manera que, por ejemplo, podrías usar el método HTMLFormElement.reset() para restablecer un formulario a su estado inicial.

En esencia, así es como funciona el DOM API. La interfaz más básica se denomina Node, cada elemento HTML, cadena de texto, y el propio documento en sí son también nodos. Otras interfaces amplían la interfaz Node y heredan sus propiedades en múltiples niveles. Por ejemplo, HTMLFormElement es una interfaz hija de HTMLElement, el cual es una interfaz hija de Element, que a su vez es una interfaz hija de Node.

El navegador web organiza todos estos nodos en un árbol del documento (DOM tree) que representa todos los nodos y las relaciones entre ellos de forma jerárquica.

Árbol del DOM — Fuente de la imagen cortesía de Birger Erikkson

¿Qué es DOM API?

Mientras existen muchos DOM (cada documento HTML, XML, y SVG cuenta con un DOM), solo existe un DOM API, el cual es una especificación de W3C. La DOM API está escrita en JavaScript, y puedes usarla para manipular el DOM de un documento web usando JavaScript.

API es el acrónimo de “Application Programming Interface” (Interfaz de programación de aplicaciones), y es una colección de clases, interfaces, propiedades, métodos, y otras estructuras de código que los desarrolladores pueden utilizar para acceder a la funcionalidad de una aplicación. Por ejemplo, puedes usar la API de Twitter para acceder a tuits, usuarios, mensajes, anuncios, y otros elementos de la aplicación de Twitter de forma programática. De igual forma, puedes usar interfaces de programación de aplicaciones web para usar las funcionalidades integradas en un navegador web (el cual también es en sí mismo una aplicación).

La DOM API es una de las múltiples API web integradas en los navegadores web. Existen API de bajo nivel como la Web Workers API (para operaciones de fondo) y otras de alto nivel como el propio DOM.

La mayoría de las API web, incluyendo DOM API, están escritas con JavaScript. Primero, el W3C crea las especificaciones, después los proveedores de navegadores las implementan. Por lo tanto, el "soporte del navegador" hace referencia a si un navegador ha implementado una funcionalidad específica de la DOM API o no. Si el soporte del navegador es bueno, podrás usar un objeto, una propiedad, o un método con seguridad (implementación de la interfaz), mientras que si el soporte es deficiente o pobre, será mejor encontrar una alternativa (puedes comprobar el soporte del navegador en el sitio web de CanIUse).

Las etiquetas y los atributos HTML, así como los estilos CSS tienen todos sus propios manejadores en DOM API de forma que puedas modificarlos dinámicamente. Por ejemplo, la siguiente etiqueta HTML:

<a href='pagina.html' target='_blank'>Haz clic en este enlace</a>

Es representado por cuatro nodos (uno de ellos padre y tres hijos) en el DOM:

(nodo padre) un objeto HTMLAnchorElement en el DOM (es la implementación de la interfaz HTMLAnchorElement), se trata de un elemento nodo
(nodo hijo) una propiedad HTMLAnchorElement.href definida por la interfaz HTMLAnchorElement; este es un atributo node
(nodo hijo) una propiedad HTMLAnchorElement.target; este es otro atributo node
(nodo hijo) un node de texto (“Haz clic en este enlace”)

En el siguiente tutorial sobre el DOM y JavaScript, veremos cómo puedes usar DOM API en la práctica.

Ejemplo de uso de DOM API

En este tutorial sobre el DOM y JavaScript vamos a cambiar el color del texto del anterior enlace dinámicamente, desde el azul predeterminado al magenta.

Si analizas la documentación de la interfaz HTMLAnchorElement, no encontrarás ninguna propiedad o métodos que puedas usar para conseguirlo.

Pero, como HTMLAnchorElement es una interfaz hija de HTMLElement, hereda también sus propiedades y métodos. Esta interfaz tiene una propiedad HTMLElement.style que te permite cambiar el CSS perteneciente a un elemento HTML. Si lees su descripción en la documentación, verás que puede usar referencias de las propiedades CSS, también definidas por la DOM API.

En nuestro ejemplo, tenemos que usar la propiedad color, así que escribiremos el siguiente código:

element.style.color = 'magenta';

Sin embargo, si ejecutamos este código, devolverá una excepción ReferenceError en la consola dado que element no está definido. Antes de que podamos manipular un elemento del DOM con JavaScript, tenemos que seleccionarlo usando la DOM API y pasarle a una variable.

Para seleccionar nodos en un documento, tenemos que ir a la interfaz Document. Esta interfaz tiene dos métodos JavaScript del DOM que podemos usar, Document.querySelector(), que encuentra la primera instancia de un selector y Document.querySelectorAll() que encuentra todas las instancias de un selector. Aquí, usaremos querySelector(), ya que tenemos solo una elemento ancla en la página. Por tanto, el nuevo código será el siguiente:

// selecciona el primer elemento 'a' de la pagina
let element = document.querySelector('a');

// establece la propiedad 'color'a 'magenta'
element.style.color = 'magenta';

Ahora, este código funcionará adecuadamente y cambiará el color del enlace a magenta. Aquí hay algunas cosas a destacar:

como style.color es una propiedad, podemos establecer su valor usando el operador de asignación (=)
dado que document.querySelector() es un método (indicado por los valores entre paréntesis tras él), podemos definir su valor añadiendo un parámetro ('a') entre estos caracteres
aunque tenemos que definir la variable element, no tenemos que definir la variable document, ya que se trata de un objeto global similar a window (la variable correspondiente está integrada en el navegador. Fíjate que el objeto está escrito con el primer carácter en mayúscula, por ejemplo, Document, mientras que la variable está escrita en su totalidad en minúsculas, por ejemplo, document)
Si tuviésemos más de un enlace en la página, necesitaríamos usar el método querySelectorAll() en lugar de querySelector() y colocar la declaración element.style.color dentro del un bucle for para cambiar el color de todos los enlaces de la p´agina:

<a href='pagina01.html' target='_blank'>Enlace 01</a>
<a href='pagina02.html' target='_blank'>Enlace 02</a>
<a href='pagina03.html' target='_blank'>Enlace 03</a>

// selecciona todos los elementos 'a' de la pagina
let elements = document.querySelectorAll('a');

// recorre a través de todos los objetos element que son un NodeList
for (let i = 0; i < elements.length; i++) {

    // establece la propiedad del 'color' a 'magenta'
    elements[i].style.color = 'magenta';
}

Tenemos que recorrer en bucle a través de la variable elements, ya que querySelectorAll() devuelve un objeto NodeList que incluye más de un elemento.

¿Qué tipo de objeto es devuelto?

Siempre es importante saber qué tipo de objeto devuelve un método, ya que este definirá tus opciones. Por ejemplo, como querySelector() devuelve un objeto Element que solo tiene un elemento, en el ejemplo anterior no tenemos que recorrerlo.

Puedes o bien comprobar el tipo devuelto en la documentación del método o usar el método console.log() y ejecutar el código en la consola de las herramientas para desarrolladores de tu navegador.

Por ejemplo, podrías comprobar el tipo devuelto de la anterior variable elements con console.log(elements); el cual devuelve el siguiente valor en la consola web (exactamente en las Herramientas para desarrolladores de Chrome):

Un mejor ejemplo del uso de DOM API

Con frecuencia DOM API proporciona más de una solución para la misma tarea. Por tanto, siempre es buena idea preguntarnos si hemos usado la mejor. Por ejemplo, en el caso anterior no lo hicimos, cambiamos el estilo usando JavaScript, el cual va en contra del principio de diseño de software sobre la separación de aspectos (SoC).

Sería mucho más eficaz, tanto para el rendimiento como para nuestro flujo de trabajo, si añadiésemos la clase dinámicamente a cada etiqueta de ancla a la que deseemos cambiar el color, después agregásemos las reglas de estilo usando CSS. Afortunadamente, el DOM tiene una solución para esto, el método Element.classList.add() que podemos usar en cada objeto que herede del objeto Element.

El anterior ejemplo tiene el siguiente aspecto usando este método:

// selecciona todos los elementos 'a' de la pagina
let elements = document.querySelectorAll('a');

// recorre todas las variables de los elementos
for (let i = 0; i < elements.length; i++) {

    // añade la clase 'dynamic-color' a cada elemento
    elements[i].classList.add('dynamic-color');
}

Después, podemos añadir el color con CSS:

.dynamic-color {
    color: magenta;
}

Creo que es mucho mejor. También será mucho más fácil cambiar el color del enlace si queremos.

Siguientes pasos

¡Aquí terminamos nuestro exhaustivo tutorial del DOM JavaScript que explica cómo funciona DOM API!

Para entenderlo mejor, echa un vistazo a mis otros artículos sobre este tema: uno sobre event listeners que te permitirá vincular funcionalidad dinámica (por ejemplo, el cambio de color en el anterior ejemplo) a eventos (por ejemplo, un clic) y otro sobre cómo convertir jQuery a JavaScript usando DOM API.

La red para desarrolladores de Mozilla (MDN) también tiene estupendos artículos, por ejemplo, su tutorial introducción al DOM y la página HTML DOM API que explica cómo usar interfaces que pertenezcan a nodos de elemento HTML.