Manipular el DOM: modificar la página HTML con JavaScript

El DOM (Document Object Model) es un sistema que representa los elementos de un documento HTML como objetos que el lenguaje JavaScript puede manipular. Eso significa que, cuando usas JavaScript para trabajar con el DOM, puedes añadir, eliminar, modificar o acceder a los elementos HTML de tu página web.

En este ejemplo vamos a usar el siguiente código HTML para ilustrar las distintas técnicas de manipulación del DOM:

<div id="container">
  <h1 class="title">Mon titre</h1>
  <p class="description">Ma description</p>
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

Seleccionar nodos del DOM

Para manipular el DOM lo primero es seleccionar los nodos que quieres modificar. Hay varios métodos para seleccionar nodos en JavaScript:

• El método document.getElementById selecciona un nodo a partir de su ID. Por ejemplo, para seleccionar el div con el ID «container» puedes usar esta sintaxis:

const container = document.getElementById('container');

• El método document.getElementsByClassName selecciona una lista de nodos a partir de su clase. Por ejemplo, para seleccionar todos los elementos li con la clase «item» puedes usar esta sintaxis:

const items = document.getElementsByClassName('item');

• El método document.querySelector selecciona el primer nodo que coincide con un selector CSS. Por ejemplo, para seleccionar el primer elemento li de la lista puedes usar esta sintaxis:

const firstItem = document.querySelector('li');

Este método devuelve el primer elemento que coincide con el selector indicado. Si no encuentra ninguno, devuelve null.

• El método document.querySelectorAll es parecido, pero devuelve una lista con todos los nodos que coinciden con el selector indicado. Por ejemplo:

const items = document.querySelectorAll('li');

Este método permite seleccionar varios elementos a la vez. Puedes recorrerlos con un bucle, como vimos en el capítulo dedicado a los bucles.

Si has seguido ese capítulo, ten en cuenta que puedes usar el método forEach del objeto Array con document.querySelectorAll('li'). Así es como se hace:

document.querySelectorAll('li').forEach(function(li) {
  // Código a ejecutar para cada elemento li
});

Este código selecciona todos los elementos li de la página y ejecuta cierto código para cada uno de ellos. Por ejemplo, si quieres añadir un evento «click» a cada elemento li, puedes hacer esto:

document.querySelectorAll('li').forEach(function(li) {
  li.addEventListener('click', function() {
    console.log("L'élément li a été cliqué !");
  });
});

También puedes usar una función flecha en lugar de la función anónima:

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    console.log("L'élément li a été cliqué !");
  });
});

• Otra posibilidad es seleccionar elementos usando sus identificadores o sus clases, igual que se hace en CSS. Por ejemplo:

const container = document.querySelector('#container');
const title = document.querySelector('.title');

Con esta sintaxis puedes seleccionar elementos según su identificador o su clase. Resulta útil cuando quieres manipular esos elementos concretos desde JavaScript.

Hay muchas otras maneras de seleccionar elementos en el DOM con JavaScript, pero estos métodos son los más habituales y una buena base para empezar.

Modificar el DOM con JavaScript

Ahora que hemos visto varios métodos para obtener un elemento concreto de nuestro código HTML, vamos a ver cómo modificar el DOM añadiendo contenido o cambiando el texto o el CSS.

Añadir HTML con JavaScript

Puedes añadir HTML a un elemento del DOM con la propiedad innerHTML. Por ejemplo, para añadir un párrafo al final de la lista:

const ul = document.querySelector('ul');
ul.innerHTML += '<li class="item">Item 4</li>';

Añadir un elemento nuevo con JavaScript

También puedes crear un elemento nuevo y añadirlo a un elemento del DOM con el método appendChild. Por ejemplo, para añadir un párrafo al final de la lista:

const ul = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Item 4';
ul.appendChild(newItem);

Cambiar el texto de un elemento con JavaScript

Puedes cambiar el texto de un elemento con la propiedad textContent. Por ejemplo, para cambiar el texto del título:

const title = document.querySelector('.title');
title.textContent = 'Nouveau titre';

Añadir CSS a un elemento con JavaScript

Puedes añadir CSS a un elemento del DOM con la propiedad style. Por ejemplo, para poner el párrafo en rojo y en negrita:

const p = document.querySelector('p');
p.style.color = 'red';
p.style.fontWeight = 'bold';

También puedes usar el método setAttribute para añadir CSS a un elemento. Por ejemplo:

const p = document.querySelector('p');
p.setAttribute('style', 'color: red; font-weight: bold;');

Conclusión

Hay muchas otras maneras de manipular el CSS de un elemento del DOM con JavaScript, pero estos métodos son los más habituales y una buena base para empezar.

Además del CSS, puedes manipular otros aspectos de un elemento del DOM, como su contenido HTML o su texto, o asociarle eventos de clic, de paso del ratón por encima, etc.

En el próximo capítulo veremos los eventos en JavaScript y cómo trabajar con ellos.