Cuando utilizamos JavaScript en el navegador, o del lado del cliente, regularmente nos vamos a encontrar trabajando con las API del navegador, una de estas API, tal vez la más común, es la del DOM.

Como seguro ya sabes, el DOM (Document Object Model) es todo el documento HTML representado en un árbol de nodos. A mí me gusta pensar que estos nodos se han convertido de simples etiquetas HTML a objetos vivos, han pasado de ser solo un concepto a realmente vivir dentro del navegador.

Estos nodos son manipulables, accesibles y modificables, de hecho podemos decir que modificar estos nodos es la razón de existir de JavaScript, porque aunque JS hoy en día se usa en muchisimos entornos, incluido el servidor, nació como un pequeñito sistema de scripting para manipular el DOM. 🤯

Por eso es muy importante aprender sobre esta manipulación. En esta lección vamos a aprender 3 cosas importantes:

1. Cómo seleccionar y cómo crear nodos con JavaScript.
2. Vamos a conectarnos a algunos eventos disponibles de estos nodos y del documento.
3. También vamos a entender cómo podemos utilizar templates HTML con JS.

Vamos pues. 🏄🏻

🛸 Manipulación de nodos con JavaScript

Existen varias maneras de manipular un nodo con JavaScript, una de las más modernas es empleando una herramienta que se nos incluye en el objeto document, presente en el navegador.

Para asegurarnos de que tenemos acceso a este objeto, vamos a abrir las herramientas de desarrollador en alguna pestaña de nuestro navegador. Esto lo podemos hacer con clic derecho e inspeccionar (en Chrome).

const nodo = document.querySelector('h1');

la herramienta del document que estamos usando aquí se llama querySelector. A estas herramientas que nos facilitan la selección de nodos y algunas otras opciones que veremos en un momento, se le conoce como “Vanilla JS” este nombre es una de esas cosas nerds de las que los developers gustan. Vanilla porque es difrutable, más fácil que lo que se tenía antes, así que es una forma de decir que es más fácil que con selectElementByTagName, por ejemplo.

Una vez que hemos capturado el nodo, tenemos acceso a todas sus propiedades, y por supuesto, también podemos modificarlo. Vamos a cambiar el contenido de texto de este nodo:

const nodo = document.querySelector('h1');
console.log(nodo.textContent); // Esto nos mostrará en consola el contenido
// Pero, este método también nos sirve como setter:
nodo.textContent = "Hola Blissmo";
console.log(nodo.textContent); // el contenido se ha modificado también en la página web

podemos incluso cambiar el color y cualquier otro estilo CSS que se le que quiera aplicar al nodo:

nodo.style.color = "tomato"; // 🤯

Esto solo es la punta del iceberg, pues no solo podemos modificar nodos existentes, también podemos crear nuevos nodos y agregarlos al body o como hijo de cualquier otro nodo:

const nuevoNodo = document.createElement('h1');
nuevoNodo.textContent = "Nuevo Blissmo";
document.body.prepend(nuevoNodo);
// Con estas dos lineas de código, hemos agregado un nuevo nodo `<h1>` al *body* de la página web, y claro, podemos modificarlo, intenta cambiar el color y el tamaño tu mismo. 👽

🎪 Ahora vamos a utilizar algunos eventos del DOM

Uno de los eventos, que suceden en un documento HTML, más conocidos, es, por su puesto, el clic. Así que para explorar este evento vamos a crear un nuevo nodo, ahí mismo en la página donde nos encontramos y vamos a agregar un “listener” o un observador, como se dice en español.

const btn = document.createElement('button'); // podemos crear cualquier etiqueta HTML con createElement
btn.textContent = "Apachurrame";
btn.style = 'border-radius:9px;background:tomato;color:white;font-size:32px;cursor:pointer;margin:16px;',
document.querySelector('#root').prepend(btn);

Ahora que agregamos el botón, es momento de suscribirnos al evento del clic, pues el botón es el elemento perfecto para recibir un clic.

btn.addEventListener("click", function(event){
	console.log("Haz dado Clic")
})

Esta es la forma más tradicional de agregar un “eventListener”, pero recuerda que tenemos Vanilla JS a la mano para simplificar las cosas, así que hagámoslo mejor de una manera más moderna.

btn.onclick = (event) => console.log("Haz dado clic");

Observa que hemos usado un “arrow function” y que además estos eventos siempre nos entregan un objeto event, que podemos usar o no (lo usaremos en un momento más).

Si das clic en el botón ahora podrás darte cuenta de que mostramos dos console.log.

👀 Toma nota de que al usar la sintaxis onclick los nombres de los eventos cambian sutilmente, pues mientras en un addEventListener el evento es clic, de la otra manera será onclick.

Vamos a utilizar el objeto evento que recibimos cuando se hace clic, para ver que contiene.

btn.onclick = (event) => {
	console.log(event);
}
// PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

Puedes ver que el evento está lleno de información superútil, podemos dejarnos llevar por nuestra imaginación para crear experiencias geniales para nuestros usuarios, datos como clientX y clientY que son las coordenadas del mouse al momento del clic, el tipo de clic que en este caso ha sido el “mouse” hasta el timestamp que representa el momento en el tiempo en el que el clic ha sucedido. UFF me falta creatividad para usar todos estos datos. 🤨

Pero este evento incluye un elemento importante, este elemento es el target.

El elemento target es un nodo, es justamente el nodo responsable del evento, sí, el propio botón.

Podemos hacer uso de este elemento de la siguiente manera:

btn.onclick = (event) => {
	console.log(event.target);
	event.target.style.background = "indigo";
}

Vemos en consola el botón, además de que hemos cambiado su background, esto es muy útil cuando colocamos múltiples eventos en múltiples botones u otros nodos y queremos modificar solo el nodo que ha recibido el clic. ¿Genial no? 🤖

Ahora sabes que con JS podemos crear y modificar nodos, además de suscribirles eventos. Que por cierto, en esta lección hemos visto solo el clic para introducir esta API, pero te dejo un enlace a la documentación oficial, donde vas a encontrar la lista completa de eventos del DOM para que los explores por tu cuenta.

🎒 Por último, quiero mostrarte un hack

A la creación de nodos con JS utilizando createElement se le conoce como programación “imperativa”, y este tipo de programación regularmente está contrastada con la programación “declarativa”.

Para darte un ejemplo que te permita entender perfectamente las diferencias entre uno y otro, vamos a crear este mismo botón de una forma declarativa, ya que lo que hemos hecho anteriormente ha sido programación imperativa:

document.body.innerHTML = `
<button 
	style="border-radius: 9px; background: indigo; color: white; font-size: 32px; cursor: pointer; margin: 16px;"
>
	Apachurrame
</button>`

Cuando ejecutamos este comandito, estamos sustituyendo todo el body con un nodo button.

Lo interesante aquí, es que no hemos usado createElement ni hemos asignado estilos al nodo con .style, hemos simplemente dibujado una etiqueta HTML como lo haríamos en un archivo .html.

Y lo hemos hecho en JavaScript con una de sus herramientas más recientes: las template strings o template literals. Estas comillas nos permiten escribir HTML con comodidad, haciéndonos más fácil agregar árboles de nodos más complejos sin la necesidad de crear nodo por nodo, incluso podemos incluir variables:

const text = "Apachurramesta"
document.body.innerHTML = `
<div 
	style="padding:16px;background:lightblue;border-radius:9px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;"
>
	<h1 style="font-size:44px;color:tomato;">Hola Blissmo</h1>
	<button 
		style="border-radius: 9px; background: indigo; color: white; font-size: 32px; cursor: pointer; margin: 16px;"
	>
		${text}
	</button>
</div>
`

¡Genial! Ahora sabes de qué trata la manipulación y los eventos del DOM, es momento de que practiques con tus nuevos poderes y te des cuenta de que tienes el mundo web a tu merced.

Recuerda ser un dios benévolo. 😎🌎

Enlaces relacionados

Manipulación del DOM

Todos los eventos del DOM

Template strings