Cómo manipular el DOM (Document Object Model) con JavaScript

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.

¿Qué es el DOM?

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.

Características del DOM

Estructura Jerárquica: El DOM organiza los elementos de un documento en una estructura de árbol, donde cada nodo del árbol representa un objeto del documento.
Interactividad: Permite que los desarrolladores modifiquen el contenido y la estructura de la página en respuesta a eventos o acciones del usuario.
Compatibilidad: El DOM es compatible con múltiples lenguajes de programación, aunque JavaScript es el más comúnmente utilizado en el navegador.

Cómo acceder al DOM

seleccionar Elementos

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');

Manipulando Elementos del DOM

Una vez que hayas accedido a un elemento, puedes modificar su contenido y atributos.

Cambiar el contenido de un elemento

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

Cambiar atributos

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');

Estilo y clases

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

Añadir y Eliminar Elementos

Además de modificar elementos existentes, también puedes crear nuevos elementos y eliminarlos del DOM.

Crear un nuevo elemento

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);

Eliminar un elemento

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);

Eventos en el DOM

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.

Escuchar eventos

Utiliza addEventListener para escuchar eventos en un elemento.

const boton = document.getElementById('mi-boton');
boton.addEventListener('click', () => {
    alert('Botón clicado');
});

Tipos de eventos

Algunos de los tipos de eventos más comunes son:

click: Se dispara cuando un elemento es clicado.
mouseover: Se dispara cuando un puntero del ratón se coloca sobre un elemento.
keypress: Se dispara cuando una tecla es presionada.

Ejemplo completo

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>

Conclusión

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!