Manipulando el DOM: Haciendo que tu sitio sea interactivo con JavaScript

En el desarrollo web, hacer que tu sitio sea interactivo es esencial para proporcionar una experiencia de usuario enriquecedora. Una de las formas más efectivas de lograrlo es manipulando el Modelo de Objetos del Documento (DOM) con JavaScript. En este artículo, exploraremos qué es el DOM y cómo puedes usar JavaScript para interactuar con los elementos HTML en tu página. ¿Listo para dar vida a tu sitio? ¡Vamos!

¿Qué es el DOM?

El DOM es una representación estructural de un documento HTML. Permite que lenguajes de programación como JavaScript accedan y manipulen el contenido, la estructura y el estilo de la página. En otras palabras, el DOM transforma tu código HTML en un árbol de objetos que puedes controlar con JavaScript.

Cada elemento HTML es un nodo en este árbol, y puedes seleccionarlos, modificarlos o eliminarlos según sea necesario.

Interactuando con el DOM en JavaScript

JavaScript ofrece varios métodos para interactuar con el DOM. Uno de los más comunes es document.querySelector, que te permite seleccionar un elemento HTML específico utilizando un selector CSS. Veamos cómo funciona esto.

Ejemplo: Modificando el texto o los estilos de un elemento

Imagina que tienes el siguiente código HTML:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulando el DOM</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 id="title">¡Bienvenido a mi sitio!</h1>
    <button id="changeText">Cambiar Texto</button>

    <script src="script.js"></script>
</body>
</html>

Ahora, aquí tienes el código JavaScript en script.js para modificar el texto del título y añadir una clase CSS:

JSX

// Seleccionar el botón por su ID
const button = document.getElementById('changeText');

// Agregar un evento de clic al botón
button.addEventListener('click', () => {
    // Seleccionar el título por su ID
    const title = document.querySelector('#title');

    // Modificar el texto del título
    title.textContent = '¡Gracias por visitar mi sitio!';

    // Añadir una clase CSS para cambiar el estilo
    title.classList.add('highlight');
});

Explicación del Código

Seleccionando el Elemento: Usamos document.getElementById para seleccionar el botón. Esto nos permite agregar un evento de clic.
Escuchando el Evento: Cuando el usuario hace clic en el botón, ejecutamos una función.
Modificando el Texto: Seleccionamos el título utilizando document.querySelector y cambiamos su contenido textual con textContent.
Cambiando el Estilo: Añadimos una clase CSS (highlight) al título, lo que cambia su apariencia según el estilo definido en la etiqueta <style>.

Conclusión

Manipular el DOM con JavaScript es una habilidad esencial para cualquier desarrollador web que busque crear sitios interactivos. Con document.querySelector y otros métodos, puedes modificar fácilmente el contenido y el estilo de tus elementos HTML. ¡Siéntete libre de experimentar con diferentes elementos y estilos para hacer que tu sitio sea aún más dinámico y atractivo!