JavaScript: qué es el DOM y cómo manipularlo

Eran tiempos difíciles. Estábamos a finales de la década de los 90 y eso era el infierno web. La guerra era muy dura, muchos cayeron intentando aclararse entre JavaScript, JScript, DOM Level 0, Legacy DOM... Yo no lo viví, pero me lo han contado.

El origen del DOM

El DOM, tal y como lo conocemos hoy, es fruto de la guerra de navegadores que tuvieron Netscape y Microsoft. Cada uno hacía lo que le salía del "pepe" e implementaba el dinamismo del navegador web a su manera, provocando rabietas, frustraciones y desesperación entre todas las personas aficionadas a la programación web.

A principios de los 2000 el organismo W3C quiso poner fin a tanta tontería y creó el estándar ECMAScript para que todas las implementaciones se basaran en él y, así, poco a poco, unificar las nuevas implementaciones para poner la vida un poco más fácil a los seres humanos que tenemos que interactuar con las API's del navegador web.

Qué es el DOM

Las siglas DOM se corresponden a Document Object Model. Es el nombre que se le dio a la API que nos permite interactuar con el HTML de una página web. Cuando abrimos una página web, el navegador se encarga de procesar su HTML y crea un árbol de nodos a partir del mismo.

El navegador expone este árbol de nodos a través de la API llamada DOM, dándonos mecanismos para que podamos añadir dinamismo al sitio. Inicialmente JavaScript se usaba básicamente para hacer modificaciones a través del DOM.

Qué podemos hacer con el DOM

A grandes rasgos, podemos hacer dos cosas: seleccionar elementos y manipular elementos. Para seleccionar elementos se usan referencias que se almacenan en variables, mientras que para manipularlos se crean funciones.

Seleccionar elementos en el DOM

Seleccionar un elemento consiste en enlazar uno o varios nodos del HTML a una variable. Para hacerlo tenemos disponibles varias funciones en el objeto document:

querySelector: se le pasa un selector CSS y devuelve el primer nodo que coincide con ese selector.
querySelectorAll: como querySelector, pero en este caso devuelve todos los elementos que se encuentren.
getElementByClassName: se le pasa el nombre de una clase CSS (sin el punto inicial) y devuelve el primer elemento que encuentra con esa clase.
getElementById: parecido al anterior, pero en este caso se pasa el nombre de un identificador CSS y devuelve el elemento correspondiente.
getElementByTagName: se indica el nombre de una etiqueta HTML y devuelve todos los nodos con esa etiqueta.

Aquí un ejemplo de cada selector:

<div id="container">
  <h2 class="subtitle">Hello World</h2>
  <h2 class="subtitle">Another subtitle</h2>

  <ul class="my-list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

const firstSubtitle = document.querySelector(".subtitle") // devuelve el primer <h2>
const firstListElement = document.querySelector("#container .my-list li") // devuelve el primer <li>

const allSubtitles = document.querySelectorAll(".subtitle") // devuelve los dos <h2>
const allLiElements = document.querySelectorAll("#container .my-list li") // devuelve todos los <li>

const myList = document.getElementByClassName("my-list") // devuelve el nodo <ul>

const container = document.getElementById("container") // devuelve el nodo <div>

const liElements = document.getElementByTagName("li") // devuelve los tres <li>
const liElements = document.getElementByTagName("li")[1] // devuelve el segundo <li>

const unknownElement = document.getElementByClassName("hola") // undefined

Con esta diversidad de funciones selectoras podemos encontrar cualquier elemento dentro del HTML y podemos ser tan específicos como queramos.

Manipular elementos en el DOM

Cuando ya tenemos los elementos seleccionados, para manipularlos usaremos eventos y funciones.

Los eventos son una serie de "cosas que pasan" relacionadas con la interacción del usuario: un clic, pasar o quitar el ratón por una zona, escribir en un input de un formulario, hacer scroll hacia abajo o arriba...

JavaScript nos permite enlazar un elemento del HTML con un evento, y ejecutar una función en respuesta a ese evento. Ejemplo, al hacer clic en cierto botón, se hace una llamada a una API concreta.

Para enlazar un elemento con un evento, usamos la función addEventListener. Esta función necesita dos parámetros:

el evento que nos interesa
la función que debe ejecutarse cuando suceda

Eventos que pueden suceder hay muchos, como click, focus, scroll, mouseenter... Puedes ver un listado completo en MDN.

Un ejemplo:

const clickHandler = () => {
  console.log("Clic en elemento")
}

const elemento = document.getElementById("elemento")

elemento.addEventListener("click", clickHandler)

Al hacer esto, JavaScript ejecutará la función clickHandler tan pronto como hagamos clic al elemento seleccionado.

Conclusión

Hemos visto qué es el DOM y cómo manipularlo. Concretamente, hemos visto cómo podemos seleccionar elementos en el árbol HTML y cómo enlazarles eventos con respuestas a los mismos.

¿Interesante verdad? Esto abre un mundo de posibilidades para añadir dinamismo a una página web. Si quieres ver un ejemplo sencillo pero práctico sobre esto, puedes mirar el post How the JavaScript DOM Works – A Practical Tutorial de freeCodeCamp.