El Document Object Model (DOM) es la interfaz que permite a JavaScript interactuar con el contenido y la estructura de una página web. Imagina el DOM como un árbol donde cada nodo es un elemento de tu HTML: un párrafo, un botón, una imagen. Gracias al DOM, JavaScript puede modificar, añadir o eliminar estos elementos, transformando una página estática en una experiencia interactiva y dinámica.
En el desarrollo web moderno, comprender y manejar el DOM es absolutamente fundamental. Desde simples cambios de texto hasta animaciones complejas y la gestión de formularios, todo pasa por la manipulación del DOM. Sin él, tus sitios web serían meros documentos estáticos, incapaces de responder a las acciones del usuario o de actualizarse en tiempo real.
En este post, vamos a sumergirnos en el corazón de la interacción web con una recopilación de ejercicios prácticos de DOM con JavaScript. Estos ejemplos te guiarán paso a paso para que puedas implementar funcionalidades comunes y esenciales en tus propios proyectos. ¡Prepárate para llevar tus habilidades de front-end al siguiente nivel!
¿Qué es el DOM y por qué es crucial en el desarrollo web?
El DOM no es solo una representación de tu HTML; es una API (Application Programming Interface) que permite a los lenguajes de scripting, como JavaScript, acceder y modificar el contenido, la estructura y el estilo de los documentos HTML y XML. Cuando tu navegador carga una página web, crea una representación en memoria de esa página, y esa representación es el DOM.
La interacción entre HTML, CSS y JavaScript
Para entender la importancia del DOM, es clave ver cómo interactúa con las tres tecnologías fundamentales de la web:
- HTML (Estructura): Define el contenido y la estructura de la página (títulos, párrafos, imágenes, formularios).
- CSS (Estilo): Controla la presentación visual de los elementos HTML (colores, fuentes, diseño).
- JavaScript (Comportamiento/Interactividad): Utiliza el DOM para manipular el HTML y el CSS, añadiendo dinamismo y respuesta a las acciones del usuario.
Por ejemplo, si un usuario hace clic en un botón, JavaScript puede escuchar ese evento a través del DOM y, en respuesta, cambiar el texto de un párrafo (modificando el HTML) o el color de fondo de un elemento (cambiando el CSS). Esta capacidad de interconectar las tres capas es lo que hace que las aplicaciones web modernas sean tan potentes y atractivas. Para profundizar en cómo JavaScript enlaza todo, puedes consultar nuestro artículo sobre Fundamentos de Programación JavaScript.
document.querySelector() y su poder
Una de las herramientas más utilizadas para acceder a elementos en el DOM es el método document.querySelector(). Este método te permite seleccionar el primer elemento que coincide con un selector CSS especificado. Es increíblemente versátil, ya que puedes usar cualquier selector CSS válido para encontrar el elemento que necesitas.
Por ejemplo, si tienes un div con la clase mi-clase, puedes seleccionarlo con document.querySelector('.mi-clase'). Si tiene un ID mi-id, usarías document.querySelector('#mi-id'). Esta flexibilidad lo convierte en una opción poderosa para la manipulación del DOM, como veremos en los siguientes ejercicios.
Ejercicio 1: Activar y Desactivar un Campo de Entrada (<input>)
Este ejercicio es fundamental para controlar la interacción del usuario con formularios. A menudo, queremos que ciertos campos de entrada estén deshabilitados hasta que se cumplan ciertas condiciones. Con JavaScript y el DOM, podemos alternar fácilmente el estado disabled de un elemento input.
El Problema: Tienes un campo de texto que debe estar deshabilitado por defecto y solo activarse al hacer clic en un botón. Al volver a hacer clic en el botón, el campo debe deshabilitarse de nuevo.
La Solución: Usaremos la propiedad disabled de los elementos input y un evento click en un botón para alternar su valor. También cambiaremos el texto del botón para reflejar su estado actual.
Controlando la propiedad disabled
La propiedad disabled es un booleano que, cuando es true, deshabilita el elemento, impidiendo que el usuario interactúe con él. Cuando es false, el elemento está habilitado.
A continuación, el código HTML y JavaScript para este ejercicio:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Activar/Desactivar Input DOM</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
input {
margin-right: 10px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<h1>Activar/Desactivar un input con un botón (disabled).</h1>
<input type="text" id="miInput" placeholder="Escribe algo..." disabled>
<button id="toggleBtn">Activar</button>
<script>
// Activar/desactivar un input con un botón (disabled).
const input = document.querySelector("#miInput");
const boton = document.querySelector("#toggleBtn");
boton.addEventListener("click", () => {
if (input.disabled) {
input.disabled = false;
boton.textContent = "Desactivar";
input.focus(); // Opcional: enfocar el input al activarlo
} else {
input.disabled = true;
boton.textContent = "Activar";
}
});
</script>
</body>
</html>
En este código:
- Seleccionamos el
inputy elbuttonusandodocument.querySelector()por sus IDs. - Añadimos un «event listener» al botón que se activa con el
click. - Dentro del evento, comprobamos la propiedad
disableddelinput.- Si está deshabilitado (
true), lo habilitamos (false), cambiamos el texto del botón a «Desactivar» y, opcionalmente, ponemos el foco en el input. - Si está habilitado (
false), lo deshabilitamos (true) y cambiamos el texto del botón a «Activar».
- Si está deshabilitado (
Este ejemplo demuestra cómo el control de la propiedad disabled en JavaScript DOM te permite crear interfaces más interactivas y guiar al usuario a través de un flujo lógico.
Ejercicio 2: Toggle de Clases CSS para Estilos Dinámicos
Manipular las clases CSS de los elementos es una forma increíblemente eficiente de cambiar su apariencia. En lugar de modificar propiedades CSS individuales con JavaScript, lo cual puede ser tedioso y propenso a errores, simplemente alternamos una clase que contenga los estilos deseados. Esto nos permite separar la lógica (JavaScript) de la presentación (CSS) de manera efectiva.
El Problema: Tienes un botón que, al hacer clic, debe cambiar su estilo (por ejemplo, color de fondo y texto). Al volver a hacer clic, debe revertir a su estilo original.
La Solución: Utilizaremos el método classList.toggle() para añadir o eliminar una clase CSS específica al botón.
classList.toggle(): Tu aliado para el dinamismo
La interfaz classList es una propiedad de solo lectura del Element que devuelve un DOMTokenList de los atributos de clase del elemento. El método toggle() de esta interfaz es particularmente útil, ya que añade una clase si no existe y la elimina si sí existe. Es una forma concisa y elegante de alternar estados visuales.
Aquí tienes el HTML, CSS y JavaScript para este ejercicio:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Clase CSS con DOM</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
#miBoton.activa {
background-color: dodgerblue;
color: white;
}
</style>
</head>
<body>
<h1>Botón con clase activa</h1>
<button id="miBoton">Haz clic en mí</button>
<script>
// Botón con clase activa
const boton = document.querySelector("#miBoton");
boton.addEventListener("click", () => {
boton.classList.toggle("activa");
});
</script>
</body>
</html>
En este ejemplo:
- Definimos una clase CSS
activacon los estilos que queremos aplicar cuando el botón esté «activo». - Seleccionamos el botón por su ID.
- Añadimos un «event listener» al botón.
- Dentro del evento, simplemente llamamos a
boton.classList.toggle("activa"). Esto se encarga de añadir o eliminar la claseactivaen cada clic, y el CSS hará el resto para cambiar la apariencia del botón.
Este ejercicio es un claro ejemplo de la manipulación de clases CSS con JavaScript DOM, una técnica esencial para crear interfaces dinámicas y receptivas. Para aprender más sobre cómo organizar tus estilos, visita nuestro post sobre Buenas Prácticas en CSS.
Ejercicio 3: Manipulando Enlaces Dinámicamente
Los enlaces son elementos fundamentales en cualquier página web, permitiendo la navegación entre diferentes recursos. Con JavaScript y el DOM, no solo podemos cambiar el destino de un enlace (su atributo href), sino también su texto visible (textContent). Esto abre la puerta a funcionalidades como la navegación condicional, la actualización de enlaces en tiempo real o la personalización de la experiencia del usuario.
El Problema: Tienes un enlace que apunta a Google y un botón. Al hacer clic en el botón, el enlace debe cambiar para apuntar a alediaz.xyz y su texto debe cambiar a «Todos los ejercicios aquí».
La Solución: Accederemos a los atributos href y textContent del elemento <a> y los modificaremos al hacer clic en un botón.
Cambiando atributos href y textContent
El atributo href de un enlace (Anchor element <a>) define la URL a la que apunta el enlace. La propiedad textContent permite acceder o modificar el contenido de texto de un nodo y sus descendientes.
Aquí te mostramos cómo implementar esta funcionalidad:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enlace dinámico</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
a {
display: inline-block;
margin-right: 10px;
padding: 8px 15px;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 4px;
}
button {
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<h1>Enlace dinámico</h1>
<a id="miEnlace" href="https://www.google.com" target="_blank">Ir a Google</a>
<button id="cambiarHref">Cambiar enlace</button>
<script>
// Enlace dinámico
const enlace = document.querySelector("#miEnlace");
const boton = document.querySelector("#cambiarHref");
boton.addEventListener("click", () => {
enlace.href = "https://myblog-dvr3stklly.live-website.com";
enlace.textContent = "Todos los ejercicios aquí";
});
</script>
</body>
</html>
En este código:
- Seleccionamos el enlace y el botón por sus IDs.
- Añadimos un «event listener» al botón.
- Dentro del evento, simplemente asignamos nuevos valores a las propiedades
hrefytextContentdel objetoenlace. El navegador actualiza el enlace en la página.
Este ejercicio resalta la capacidad de cambiar el enlace href con JavaScript DOM y modificar su texto, lo que es útil para crear interfaces que se adapten a las necesidades del usuario o a los datos de la aplicación.
Ejercicio 4: Mostrar u Ocultar Secciones de Contenido
La capacidad de mostrar u ocultar elementos es fundamental para crear interfaces de usuario limpias y eficientes. Podemos utilizarla para implementar menús desplegables, acordeones, ventanas modales o simplemente para gestionar el contenido que es visible en un momento dado. Este ejercicio te enseñará una de las formas más comunes y efectivas de lograrlo utilizando la manipulación de clases CSS.
El Problema: Tienes una sección de contenido que debe estar oculta por defecto y solo mostrarse cuando un usuario hace clic en un botón. Al volver a hacer clic, la sección debe ocultarse de nuevo, y el texto del botón debe cambiar para reflejar el estado de la sección.
La Solución: Utilizaremos classList.toggle() en combinación con una clase CSS que aplique display: none para ocultar la sección.
Gestión de la visibilidad con classList
Para este enfoque, definiremos una clase CSS, por ejemplo, oculto, que establezca display: none; para el elemento. Luego, usaremos classList.toggle('oculto') en el elemento de contenido para alternar su visibilidad. También actualizaremos el textContent del botón para indicar si la sección se puede «Mostrar» u «Ocultar».
Aquí tienes el HTML, CSS y JavaScript para este ejercicio:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mostrar/Ocultar Sección DOM</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
button {
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 15px;
}
button:hover {
opacity: 0.9;
}
#seccion {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
transition: all 0.3s ease;
}
.oculto {
display: none;
}
</style>
</head>
<body>
<h1>Mostrar / Ocultar sección</h1>
<button id="toggleBtn">Mostrar Sección</button>
<div id="seccion" class="oculto">
<p>¡Esta es la sección oculta! Ahora puedes verla.</p>
</div>
<script>
// Mostrar / Ocultar sección
const boton = document.querySelector("#toggleBtn");
const seccion = document.querySelector("#seccion");
boton.addEventListener("click", () => {
seccion.classList.toggle("oculto");
if (seccion.classList.contains("oculto")) {
boton.textContent = "Mostrar Sección";
} else {
boton.textContent = "Ocultar Sección";
}
});
</script>
</body>
</html>
En este ejercicio:
- Definimos la clase
ocultoen CSS para establecerdisplay: none;. - La sección
divtiene la claseocultopor defecto para que inicie oculta. - Seleccionamos el botón y la sección.
- Al hacer clic en el botón, usamos
seccion.classList.toggle("oculto")para alternar la visibilidad. - Una comprobación con
seccion.classList.contains("oculto")nos permite actualizar el texto del botón dinámicamente.
Este es un ejemplo clásico de cómo mostrar y ocultar una sección con JavaScript DOM, una técnica que encontrarás en casi cualquier aplicación web interactiva.
Consejos Avanzados para la Manipulación del DOM
Dominar los ejercicios anteriores es un gran paso, pero el mundo del DOM es vasto. Aquí tienes algunos consejos adicionales para llevar tus habilidades un poco más allá:
Buenas prácticas en el uso de addEventListener
Mientras que onclick es una forma de asignar eventos, addEventListener es la forma recomendada y más flexible. Permite añadir múltiples funciones a un mismo evento en un mismo elemento sin sobrescribir las existentes.
- Delegación de eventos: En lugar de añadir un «event listener» a cada elemento individualmente (especialmente útil en listas grandes), puedes añadir uno solo a un ancestro común. Cuando un evento burbujea (se propaga desde el elemento objetivo hacia arriba en el árbol DOM), puedes identificar el elemento original que lo disparó. Esto mejora el rendimiento, especialmente con muchos elementos.
- Remover «event listeners»: Si un elemento o una funcionalidad ya no son necesarios, es una buena práctica remover los «event listeners» asociados con
removeEventListenerpara evitar fugas de memoria, especialmente en aplicaciones de una sola página (SPA).
Optimización del rendimiento al interactuar con el DOM
La manipulación del DOM puede ser costosa en términos de rendimiento, ya que cada cambio puede provocar que el navegador tenga que «redibujar» la página (reflow y repaint). Aquí algunas estrategias:
- Evita manipulaciones repetitivas: Si necesitas hacer varios cambios en un elemento, hazlos todos de una vez en lugar de modificar el DOM varias veces consecutivas. Por ejemplo, si añades múltiples elementos a una lista, crea un fragmento de documento (
document.createDocumentFragment()) o una cadena de HTML, construye todo el contenido en memoria y luego insértalo en el DOM con una sola operación. - Minimiza el acceso al DOM: Almacena referencias a los elementos DOM que uses repetidamente en variables para evitar la selección repetida.
const miElemento = document.querySelector('#miId');y luego usamiElemento. - Throttle y Debounce: Para eventos que se disparan muy frecuentemente (como
scrolloresize), utiliza técnicas de «throttling» o «debouncing» para limitar la frecuencia con la que se ejecutan tus funciones de manipulación del DOM, mejorando significativamente la fluidez.
Adoptar estas prácticas te ayudará a escribir código JavaScript más eficiente y robusto para interactuar con el DOM, creando experiencias de usuario fluidas y profesionales. En alediaz.xyz, siempre buscamos la optimización, y estos consejos se alinean con nuestra filosofía de Optimización Web y Rendimiento.
Conclusión: Lleva tus habilidades DOM al siguiente nivel
Hemos recorrido a través de algunos ejercicios fundamentales de manipulación del DOM con JavaScript. Desde activar y desactivar elementos de formulario, alternar clases CSS para estilos dinámicos, hasta modificar enlaces y controlar la visibilidad de secciones, estas habilidades son la columna vertebral de cualquier interacción moderna en la web.
La capacidad de JavaScript para interactuar con el DOM es lo que da vida a tus páginas HTML y les permite responder a los usuarios de formas significativas. A medida que sigas explorando, te darás cuenta de que la manipulación del DOM es un campo vasto con innumerables posibilidades. Sigue practicando, experimentando con diferentes métodos y combinando lo que has aprendido para construir interfaces de usuario cada vez más complejas e intuitivas.
Recuerda que la mejor manera de consolidar tus conocimientos es aplicándolos. Te animamos a replicar estos ejercicios, modificarlos y construir tus propios pequeños proyectos. La experimentación es clave para convertirte en un experto en la manipulación del DOM. ¡El siguiente paso es tuyo!
Hemos llegado al final de nuestra exploración del Document Object Model y su manipulación con JavaScript. Con estos ejercicios básicos hemos conocido los conceptos fundamentales de su estructura de árbol hasta la ejecución de ejercicios prácticos, además he subido un vídeo a YouTube donde puedes ver el procedimiento de los ejercicios y una muestra real de ellos. Esta es la parte 5 de 6 el resto en el enlace puedes ver el resto de ejercicios.
Preguntas Frecuentes (FAQ)
¿Cuál es la diferencia entre textContent y innerHTML al manipular el DOM?
textContent establece o devuelve el contenido de texto de un nodo y sus descendientes, interpretando todo como texto plano. innerHTML establece o devuelve el contenido HTML de un elemento, lo que significa que puedes insertar etiquetas HTML y el navegador las interpretará como elementos. Usa textContent cuando solo necesites modificar texto para prevenir vulnerabilidades XSS (Cross-Site Scripting) si el contenido proviene de fuentes externas. Usa innerHTML cuando necesites insertar o modificar la estructura HTML de un elemento.
¿Es mejor usar ID o clases para seleccionar elementos con querySelector?
Depende del caso de uso. Los IDs (#miId) deben ser únicos en un documento HTML y son ideales para seleccionar un elemento específico que solo aparece una vez. Las clases (.miClase) pueden aplicarse a múltiples elementos y son perfectas para aplicar estilos o comportamientos a grupos de elementos. En general, usa IDs para selecciones únicas y clases para selecciones de grupo o para aplicar estilos.
¿Qué es un «event listener» y por qué es importante?
Un «event listener» (o «escuchador de eventos») es una función de JavaScript que espera a que ocurra un evento específico (como un clic de ratón, una pulsación de tecla, una carga de página) en un elemento del DOM. Cuando el evento ocurre, el «event listener» ejecuta el código asociado. Son cruciales porque permiten que tus páginas web respondan a las interacciones del usuario y realicen acciones dinámicas, haciendo que la experiencia sea interactiva.
¿Puedo usar JavaScript para cambiar los estilos CSS directamente sin añadir/eliminar clases?
Sí, puedes. Cada elemento del DOM tiene una propiedad style que te permite acceder y modificar propiedades CSS directamente, por ejemplo, elemento.style.backgroundColor = 'red';. Sin embargo, la buena práctica general es usar la manipulación de clases CSS (classList.add(), classList.remove(), classList.toggle()) en lugar de modificar estilos individuales directamente. Esto mantiene tu CSS centralizado y es más fácil de mantener y depurar, ya que la lógica de estilo permanece en las hojas de estilo y no se dispersa por tu JavaScript.