La manipulación del DOM (Document Object Model) es una de las habilidades más fundamentales para cualquier desarrollador web que utiliza JavaScript. Este artículo te guiará a través de los conceptos básicos de cómo interactuar y modificar el DOM utilizando JavaScript. Aprenderás sobre los diferentes métodos, propiedades y eventos que puedes utilizar para hacer que tus páginas web sean dinámicas e interactivas.
El DOM (Document Object Model) es una representación estructural de un documento HTML o XML. Es una interfaz de programación que permite a los scripts (como JavaScript) acceder y modificar el contenido, la estructura y el estilo de los documentos. Cada elemento en un archivo HTML se convierte en un objeto que puede ser manipulado.
Para manipular el DOM, primero debes acceder a los elementos que deseas modificar. Hay varios métodos para seleccionar elementos en el DOM:
getElementById
Este método devuelve un único elemento que tiene el ID especificado.
const elemento = document.getElementById('mi-id');
getElementsByClassName
Este método devuelve una colección de todos los elementos que tienen una determinada clase.
const elementos = document.getElementsByClassName('mi-clase');
getElementsByTagName
Este método devuelve todos los elementos del documento que coinciden con el nombre de etiqueta especificado.
const elementos = document.getElementsByTagName('div');
querySelector
Este método devuelve el primer elemento que coincide con el selector CSS especificado.
const elemento = document.querySelector('.mi-clase');
querySelectorAll
Este método devuelve todos los elementos que coinciden con el selector CSS especificado.
const elementos = document.querySelectorAll('div.mi-clase');
Una vez que hayas accedido a un elemento, puedes modificar su contenido y atributos.
Utiliza la propiedad innerHTML o textContent para cambiar el contenido de un elemento.
const elemento = document.getElementById('mi-id'); elemento.innerHTML = 'Nuevo contenido'; // Cambia el contenido HTML elemento.textContent = 'Texto claro'; // Cambia solo el texto
Puedes utilizar el método setAttribute para cambiar los atributos de un elemento.
const elemento = document.getElementById('mi-id'); elemento.setAttribute('src', 'nueva-imagen.jpg');
Puedes modificar el estilo de un elemento utilizando la propiedad style o cambiar sus clases utilizando classList.
const elemento = document.getElementById('mi-id'); elemento.style.color = 'red'; // Cambia el color del texto elemento.classList.add('nueva-clase'); // Añade una nueva clase
Además de modificar elementos existentes, también puedes crear nuevos elementos y eliminarlos del DOM.
Utiliza document.createElement para crear un nuevo elemento y appendChild para añadirlo a un elemento existente.
const nuevoElemento = document.createElement('div'); nuevoElemento.textContent = 'Este es un nuevo div'; document.body.appendChild(nuevoElemento);
Para eliminar un elemento del DOM, utiliza el método remove o removeChild.
const elemento = document.getElementById('mi-id'); elemento.remove(); // Elimina el elemento // O, si necesitas eliminar un hijo const padre = document.getElementById('padre'); const hijo = document.getElementById('hijo'); padre.removeChild(hijo);
La manipulación del DOM también está estrechamente relacionada con la gestión de eventos. Los eventos son acciones que ocurren en la página y pueden ser capturados y manejados con JavaScript.
Utiliza addEventListener para escuchar eventos en un elemento.
const boton = document.getElementById('mi-boton'); boton.addEventListener('click', () => { alert('Botón clicado'); });
Algunos de los tipos de eventos más comunes son:
Aquí tienes un ejemplo completo donde se muestra cómo se puede manipular el DOM usando los conceptos descritos anteriormente.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ejemplo DOM</title> </head> <body> <div id="mi-id">Texto original</div> <button id="mi-boton">Cambiar texto</button> <script> const boton = document.getElementById('mi-boton'); boton.addEventListener('click', () => { const elemento = document.getElementById('mi-id'); elemento.textContent = 'Texto cambiado'; }); </script> </body> </html>
Manipular el DOM con JavaScript te permite crear aplicaciones web dinámicas y reactivas. Este artículo te ha proporcionado una base sobre cómo acceder, modificar y gestionar elementos en el DOM. Al practicar y experimentar con estas técnicas, mejorarás tus habilidades para construir interfaces de usuario interactivas y atractivas.
Recuerda que la práctica es esencial. ¡Empieza a explorar y manipular el DOM hoy mismo!
Page loaded in 28.17 ms