Manipulación del DOM en JavaScript
Cuando iniciamos en el desarrollo web, lo habitual es comenzar con HTML para estructurar el contenido y CSS para aplicarle estilo. Sin embargo, rápidamente nos damos cuenta de que solo con estas tecnologías, nuestras páginas web serán estáticas: no responden ni se adaptan a las acciones del usuario. Es aquí donde entra en juego JavaScript, que nos permite dotar de dinamismo e interactividad a nuestras páginas.
¿Qué es el DOM?
DOM significa Document Object Model (Modelo de Objetos del Documento). Es una representación estructurada del código HTML en forma de árbol jerárquico, donde cada etiqueta HTML se convierte en un nodo dentro de ese árbol. A esta estructura se le conoce comúnmente como árbol DOM.
Por ejemplo, si una etiqueta <head> está dentro de <html>, en el DOM aparecerá como hija de <html>. A su vez, una etiqueta <title> que esté dentro de <head>, también será su hija, y así sucesivamente.
Desde JavaScript podemos acceder y manipular ese árbol DOM. Esto nos permite insertar, modificar o eliminar elementos HTML, cambiar atributos, agregar clases, alterar el contenido de texto y mucho más. Todo esto puede hacerse incluso en respuesta a eventos como clics, movimientos del ratón o entradas de teclado.
El objeto document
JavaScript proporciona un objeto llamado document que nos da acceso directo al DOM de la página actual. Este objeto contiene todo lo necesario para interactuar con el contenido HTML.
Dentro del DOM encontramos principalmente dos tipos de nodos:
HTMLElement: representa cualquier elemento HTML.Node: puede ser un nodo de texto, comentario u otro tipo de nodo genérico.
Dependiendo del tipo de etiqueta, el navegador asigna un tipo de dato específico. Por ejemplo:
| Tipo de Objeto | Etiqueta HTML | Función |
|---|---|---|
HTMLDivElement | <div> | Contenedor en bloque |
HTMLSpanElement | <span> | Contenedor en línea |
HTMLImageElement | <img> | Imagen embebida |
HTMLAudioElement | <audio> | Reproductor de audio |
Herramientas nativas del DOM
JavaScript nos ofrece una API completa para interactuar con el DOM. Aquí algunas áreas clave:
- Búsqueda de elementos: Métodos como
document.querySelector()ogetElementById()permiten localizar elementos específicos en la página. - Edición de contenido: Podemos cambiar el texto, HTML interno o atributos de los elementos.
- Gestión de clases y atributos: Métodos como
.classList.add()o.setAttribute()permiten alterar fácilmente las propiedades de un elemento. - Creación de nuevos elementos: Con
document.createElement()podemos generar nuevos nodos HTML desde JavaScript. - Inserción en el DOM: Podemos agregar elementos con
.appendChild(),.append(),.insertBefore(), entre otros.
¿Debería manipular el DOM directamente?
Aunque es perfectamente válido trabajar directamente con el DOM, en proyectos más complejos se suelen utilizar librerías o frameworks como React, Vue o Angular. Estas herramientas nos abstraen del DOM y ofrecen una forma más estructurada y eficiente de crear interfaces, aunque a costa de cierta complejidad inicial y un poco de pérdida en rendimiento.
Eso sí: aprender cómo funciona el DOM y saber manipularlo con JavaScript puro es una habilidad fundamental. Aunque luego utilices frameworks, entender el DOM te ayudará a escribir mejor código, depurar problemas y comprender cómo funcionan internamente estas herramientas.