Manipulación del DOM con JavaScript

¿Qué es el DOM?

DOM significa Document Object Model o Modelo de Objetos del Documento. Es una representación estructurada de la página web que permite acceder y manipular los elementos HTML mediante JavaScript. Piensa en el DOM como un árbol de nodos donde cada elemento HTML (como <div>, <p>, <h1>, etc.) es un nodo en ese árbol.

El navegador crea el DOM cada vez que se carga una página web, y usando JavaScript se puede:

  • Acceder a los elementos del DOM.
  • Modificar su contenido y estilos.
  • Añadir o eliminar elementos de la página.

Accediendo a elementos del DOM

Para manipular el DOM, primero se necesita acceder a sus elementos. Esto se hace a través de métodos que JavaScript proporciona, cada uno con su propio propósito y utilidad. Algunos métodos comunes son:

document.getElementById()

Busca un elemento por su ID.

<div id="miElemento">Hola</div>
let elemento = document.getElementById("miElemento");
console.log(elemento); 
// <div id="miElemento">Hola</div>

document.getElementsByClassName()

Busca todos los elementos con una clase específica. Devuelve un HTMLCollection (una colección de elementos que se pueden recorrer).

<div class="claseEjemplo">Uno</div><div class="claseEjemplo">Dos</div>
let elementos = document.getElementsByClassName("claseEjemplo");
console.log(elementos); 
// HTMLCollection(2) [<div>Uno</div>, <div>Dos</div>]

document.getElementsByTagName()

Selecciona todos los elementos de un tipo de etiqueta (como <p>, <div>, <li>, etc.).

<p>Parrafo 1</p><p>Parrafo 2</p>
let parrafos = document.getElementsByTagName("p");
console.log(parrafos); 
// HTMLCollection [<p>Parrafo 1</p>, <p>Parrafo 2</p>]

document.querySelector() y document.querySelectorAll()

Son métodos similares a los anteriores, pero más flexibles, ya que permiten seleccionar elementos usando selectores CSS. querySelector() selecciona el primer elemento que coincide con el selector, mientras que querySelectorAll() selecciona todos los elementos que coincidan, devolviendo una NodeList.

<div class="miClase">Uno</div>
<div class="miClase">Dos</div>

let elemento = document.querySelector(".miClase");
console.log(elemento); 
// <div class="miClase">Uno</div>

let todosLosElementos = document.querySelectorAll(".miClase");
console.log(todosLosElementos); 
// NodeList(2) [<div>Uno</div>, <div>Dos</div>]

Cómo manipular elementos del DOM

Una vez que se ha accedido a un elemento del DOM, es posible manipular su contenido, estilo y atributos. A continuación se muestran algunos métodos útiles para hacer estas tareas.

Cambiar el Contenido de un Elemento

  • innerHTML: permite cambiar el contenido HTML de un elemento.
  • textContent: permite cambiar solo el texto (sin formato HTML).
<p id="miParrafo">Texto original</p>
let parrafo = document.getElementById("miParrafo");

parrafo.innerHTML = "<strong>Texto actualizado</strong>"; 
// Cambia a: <strong>Texto actualizado</strong>

parrafo.textContent = "Nuevo texto simple"; 
// Cambia el contenido a: Nuevo texto simple

Cambiar Estilos de un Elemento

Para modificar los estilos, puedes usar la propiedad .style de un elemento y acceder a propiedades CSS.

<div id="caja">Caja</div>

let caja = document.getElementById("caja");
caja.style.backgroundColor = "blue"; // Cambia el color de fondo a azul
caja.style.width = "200px"; // Cambia el ancho
caja.style.height = "100px"; // Cambia el alto

Añadir y Eliminar Clases

Las clases se pueden gestionar con la propiedad classList del elemento.

<div id="miDiv" class="rojo">Div</div>

let div = document.getElementById("miDiv");
div.classList.add("azul"); // Añade la clase "azul"
div.classList.remove("rojo"); // Elimina la clase "rojo"
div.classList.toggle("activo"); // Alterna la clase "activo"

Crear y Añadir Nuevos Elementos

Con createElement() se puede crear un nuevo elemento. Este elemento puede insertarse posteriormente en el DOM usando appendChild() o insertBefore().

 <div id="contenedor"></div>
let contenedor = document.getElementById("contenedor");

let nuevoParrafo = document.createElement("p"); 
// Crea un elemento <p>

nuevoParrafo.textContent = "Este es un párrafo nuevo."; 
// Agrega texto

contenedor.appendChild(nuevoParrafo); 
// Agrega el <p> al contenedor

Eliminar Elementos

Para eliminar un elemento, primero se selecciona el elemento y, a continuación, se usa el método remove() o removeChild().

<div id="contenedor">
<p id="paraEliminar">Eliminar este párrafo</p>
</div>

let paraEliminar = document.getElementById("paraEliminar");
paraEliminar.remove(); 
// Elimina el párrafo del DOM

Ejemplos

El siguiente ejemplo crea un botón dentro del HTML y cambia el contenido de un párrafo al pulsar sobre el botón.

<button id="boton">Cambiar Texto</button>
<p id="texto">Este es el texto original.</p>

<script>
  let boton = document.getElementById("boton");
  boton.addEventListener("click", function() {
    let texto = document.getElementById("texto");
    texto.textContent = "¡El texto ha cambiado!";
  });
</script>

El siguiente ejemplo añade un elemento a una lista cada vez que se pulsa el botón.

<button id="botonAgregar">Agregar elemento</button>
<ul id="lista"></ul>

<script>
  let boton = document.getElementById("botonAgregar");
  boton.addEventListener("click", function() {
    let lista = document.getElementById("lista");
    let nuevoElemento = document.createElement("li");
    nuevoElemento.textContent = "Elemento de lista nuevo";
    lista.appendChild(nuevoElemento);
  });
</script>