El desarrollo web moderno es impensable sin interactividad. Más allá de las páginas estáticas, los usuarios esperan experiencias dinámicas que respondan a sus acciones. Aquí es donde el DOM (Document Object Model) entra en juego, permitiéndonos a los desarrolladores manipular la estructura, el estilo y el contenido de una página web en tiempo real usando JavaScript. Si estás dando tus primeros pasos o buscando consolidar tus conocimientos, esta recopilación de ejercicios DOM JavaScript te ofrecerá la base práctica que necesitas.
En este artículo, exploraremos una serie de ejemplos prácticos DOM JavaScript que te ayudarán a entender cómo validar entradas de usuario, procesar datos de formularios, y construir elementos HTML de forma dinámica. Cada ejercicio está diseñado para ser claro, conciso y directamente aplicable, reforzando tu capacidad para interactuar con el usuario JavaScript DOM.
Introducción al DOM y su Poder en el Desarrollo Web
Antes de sumergirnos en el código, es fundamental comprender qué es el DOM y por qué es una pieza central en cualquier proyecto web interactivo.
¿Qué es el DOM (Document Object Model)?
Imagina una página web como un documento que el navegador carga e interpreta. El DOM es una representación de ese documento. Cuando un navegador lee un archivo HTML, no solo muestra el contenido; también construye una estructura de objetos lógicos a partir de él. Cada elemento HTML (un párrafo, una imagen, un botón, un formulario) se convierte en un «nodo» en esta estructura jerárquica de árbol. Esta estructura de árbol es lo que conocemos como Document Object Model.
El DOM actúa como una interfaz de programación (API) para documentos HTML y XML. Proporciona una forma estructurada de acceder y manipular elementos de una página web. Gracias a él, JavaScript puede añadir, modificar o eliminar elementos, atributos y estilos, reaccionar a eventos de usuario y mucho más. Es la puerta de entrada para que tu sitio web cobre vida y ofrezca una experiencia rica y reactiva. Para una inmersión más profunda en los conceptos fundamentales de JavaScript y su relación con el navegador, te recomendamos explorar recursos adicionales.
¿Por qué son Cruciales los Ejercicios Prácticos de DOM?
La teoría es importante, pero la práctica es lo que solidifica el conocimiento. Los ejercicios prácticos DOM JavaScript te permiten aplicar lo que aprendes en un entorno controlado, ver los resultados de inmediato y entender cómo cada línea de código impacta la interfaz de usuario. Son esenciales para:
- Reforzar conceptos teóricos: Pasar de «entender» a «saber hacer».
- Desarrollar habilidades de resolución de problemas: Encontrar soluciones a problemas comunes en la interacción web.
- Preparación para proyectos reales: Construir una base sólida para crear aplicaciones web más complejas.
Ahora, ¡manos a la obra con los ejercicios!
Ejercicio 1: Validar Campos de Texto para Formularios Robustos
La validación de entrada es una de las tareas más comunes en el desarrollo web. Es crucial validar campos formulario JavaScript DOM para asegurar que los usuarios ingresen datos correctos y completos. Este primer ejercicio te enseñará a comprobar si un campo de texto está vacío antes de procesar su contenido.
El Desafío: Asegurar que un Campo de Entrada no esté Vacío
Queremos crear un simple formulario con un campo de nombre y un botón. Cuando el usuario haga clic en el botón «Validar», comprobaremos si el campo de nombre contiene algún texto. Si está vacío, mostraremos un mensaje de error. De lo contrario, confirmaremos que la entrada es válida. Este es un paso fundamental para cómo comprobar input vacío JavaScript.
Código HTML para la Estructura Inicial
Este es el HTML que utilizaremos para nuestro primer ejercicio. Contiene una etiqueta, un campo de entrada de texto, un botón y un párrafo donde mostraremos los mensajes.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validar que un campo no esté vacío</title>
</head>
<body>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" placeholder="Escribe tu nombre">
<button id="validar">Validar</button>
<p id="mensaje" style="color: red;"></p>
<script>
// Aquí irá nuestro JavaScript
</script>
</body>
</html>
Lógica JavaScript: Comprobando el Valor y Mostrando Mensajes
El JavaScript a continuación selecciona los elementos del DOM y añade un «escuchador de eventos» al botón. Cuando se hace clic, comprueba si el valor del campo de entrada (después de eliminar los espacios en blanco con .trim()) está vacío. Basándose en esto, actualiza el textContent y el style.color del párrafo de mensaje. Para entender más sobre cómo capturar interacciones del usuario, puedes consultar guías sobre el manejo de eventos en JavaScript.
<script>
// Seleccionamos elementos
const input = document.querySelector("#nombre");
const boton = document.querySelector("#validar");
const mensaje = document.querySelector("#mensaje");
// Comprobamos que el campo no esté vacío
boton.addEventListener("click", () => {
if (input.value.trim() === "") {
mensaje.textContent = "El campo no puede estar vacío";
mensaje.style.color = "red";
} else {
mensaje.textContent = "Campo válido";
mensaje.style.color = "green";
}
});
</script>
Ejercicio 2: Mostrar Resúmenes Dinámicos de Datos de Formulario
Después de validar, a menudo necesitamos procesar y mostrar los datos que el usuario ha introducido. Este ejercicio se centra en mostrar datos formulario HTML con JavaScript y es fundamental para comprender cómo el DOM nos permite actualizar dinámicamente el contenido de nuestra página.
El Desafío: Recopilar y Presentar la Información Enviada
Crearemos un formulario de contacto simple. Cuando el usuario lo envíe, en lugar de recargar la página o enviar los datos a un servidor (que es lo que harían por defecto), capturaremos la información del nombre, email y mensaje, y la mostraremos en una sección de «resumen» justo debajo del formulario.
Estructura HTML para un Formulario Completo
Aquí está el HTML para nuestro formulario de contacto. Hemos añadido un div con el id="resumen" donde mostraremos la información procesada.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de contacto</title>
</head>
<body>
<h2>Formulario de contacto</h2>
<form id="miFormulario">
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="mensaje">Mensaje:</label><br>
<textarea id="mensaje" name="mensaje" rows="4" cols="30" required></textarea><br><br>
<button type="submit">Enviar</button>
</form>
<h3>Resumen:</h3>
<div id="resumen"></div>
<script>
// Aquí irá nuestro JavaScript
</script>
</body>
</html>
Capturando Datos y Actualizando el DOM con JavaScript
El script adjunto selecciona el formulario y el div de resumen. Al «enviar» el formulario, event.preventDefault() detiene el comportamiento predeterminado del navegador. Luego, recupera los valores de los inputs y los inyecta en el innerHTML del div de resumen, formateándolos con texto en negrita. Este es un excelente ejemplo de cómo manipular elementos formulario con DOM JavaScript para ofrecer feedback inmediato.
<script>
// Seleccionamos elementos
const formulario = document.querySelector("#miFormulario");
const resumen = document.querySelector("#resumen");
// Mostrar un resumen con los datos de un formulario
formulario.addEventListener("submit", (e) => {
e.preventDefault(); // Previene el envío del formulario por defecto
const nombre = document.querySelector("#nombre").value;
const email = document.querySelector("#email").value;
const mensaje = document.querySelector("#mensaje").value;
resumen.innerHTML = `
<p><strong>Nombre:</strong> ${nombre}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Mensaje:</strong> ${mensaje}</p>
`;
});
</script>
Ejercicio 3: Reiniciar Formularios con JavaScript para una Mejor UX
Una buena experiencia de usuario (UX) a menudo implica la capacidad de reiniciar formularios fácilmente. Aprender a reiniciar formulario JavaScript botón te permitirá ofrecer esta funcionalidad sin recargar la página.
El Desafío: Limpiar el Formulario Tras la Interacción del Usuario
Basándonos en el formulario anterior, queremos añadir un botón «Limpiar Formulario» que, al hacer clic, borre todos los campos del formulario y también el resumen que se haya mostrado.
Añadiendo un Botón de Reset al HTML Existente
Solo necesitamos añadir un botón adicional al HTML del ejercicio anterior, dándole un id para poder seleccionarlo con JavaScript.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de contacto</title>
</head>
<body>
<h2>Formulario de contacto</h2>
<form id="miFormulario">
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="mensaje">Mensaje:</label><br>
<textarea id="mensaje" name="mensaje" rows="4" cols="30" required></textarea><br><br>
<button type="submit">Enviar</button>
<button type="button" id="resetear">Limpiar Formulario</button> </form>
<h3>Resumen:</h3>
<div id="resumen"></div>
<script>
// Aquí irá nuestro JavaScript
</script>
</body>
</html>
Implementando la Función de Reset con JavaScript
El truco aquí es el método reset() del objeto HTMLFormElement. Es una forma muy sencilla de limpiar un formulario JavaScript con una sola línea de código. También borraremos el contenido del div de resumen para una limpieza completa. Para más información sobre el HTMLFormElement.reset() puedes consultar la documentación oficial de MDN Web Docs.
<script>
// Seleccionamos elementos
const formulario = document.querySelector("#miFormulario");
const botonReset = document.querySelector("#resetear");
const resumen = document.querySelector("#resumen"); // Asumiendo que 'resumen' ya existe
// Resetear un formulario desde JS
botonReset.addEventListener("click", () => {
formulario.reset(); // Resetea todos los campos del formulario
resumen.innerHTML = ""; // Limpia el contenido del resumen
});
</script>
Ejercicio 4: Convertir Datos de Entrada en una Tabla Interactiva
Este ejercicio eleva nuestra comprensión del DOM un paso más allá, enseñándonos a crear elementos HTML con JavaScript DOM de manera dinámica. Es una habilidad muy útil para construir interfaces de usuario que crecen con los datos del usuario, como listas de tareas o, en este caso, una tabla de datos.
El Desafío: Visualizar Datos de Inputs en Formato de Tabla
Vamos a crear una interfaz donde el usuario puede introducir un nombre, una edad y un email. Al hacer clic en un botón, esta información se agrega fila tabla HTML dinámicamente JavaScript a una tabla HTML ya existente, sin necesidad de recargar la página.
Creando la Estructura HTML para la Recopilación y la Tabla
El HTML incluirá los campos de entrada, un botón para agregar y una tabla con un encabezado fijo y un <tbody> vacío donde inyectaremos las nuevas filas
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convertir una serie de inputs en una tabla visual de datos.</title>
</head>
<body>
<h2>Convertir una serie de inputs en una tabla visual de datos.</h2>
<p>Introduce datos</p>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre"><br><br>
<label for="edad">Edad:</label>
<input type="number" id="edad"><br><br>
<label for="email">Email:</label>
<input type="email" id="email"><br><br>
<button id="agregar">Agregar a tabla</button>
<br><br>
<h3>Tabla de datos</h3>
<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Email</th>
</tr>
</thead>
<tbody id="tablaTbody">
</tbody>
</table>
<script>
// Aquí irá nuestro JavaScript
</script>
</body>
</html>
Generación Dinámica de Filas de Tabla con JavaScript
En este script, seleccionamos el botón «Agregar» y el <tbody> de la tabla. Cuando se hace clic en el botón, obtenemos los valores de los inputs. Luego, creamos una nueva fila de tabla (<tr>) usando document.createElement('tr'). El innerHTML de esta fila se construye con los datos de los inputs dentro de etiquetas <td>. Finalmente, usamos appendChild() para insertar la nueva fila en el <tbody>, haciendo que la tabla crezca dinámicamente. Este proceso es fundamental para el desarrollo de proyectos JavaScript que requieren listas o tablas interactivas. Puedes profundizar en Node.appendChild() en la documentación de MDN Web Docs.
<script>
// Seleccionamos elementos
const botonAgregar = document.querySelector("#agregar");
const tablaBody = document.querySelector("#tablaTbody");
// Convertir una serie de inputs en una tabla visual de datos.
botonAgregar.addEventListener("click", () => {
const nombre = document.querySelector("#nombre").value.trim();
const edad = document.querySelector("#edad").value.trim();
const email = document.querySelector("#email").value.trim();
if (nombre === "" || edad === "" || email === "") {
alert("Por favor, rellena todos los campos.");
return;
}
const fila = document.createElement("tr");
fila.innerHTML = `
<td>${nombre}</td>
<td>${edad}</td>
<td>${email}</td>
`;
tablaBody.appendChild(fila);
// Limpiar los campos después de agregar
document.querySelector("#nombre").value = "";
document.querySelector("#edad").value = "";
document.querySelector("#email").value = "";
});
</script>
Mejores Prácticas y Consejos Adicionales para el DOM en JavaScript
Dominar los conceptos básicos es un gran comienzo, pero para escribir código DOM eficiente y mantenible, es útil conocer algunas mejores prácticas.
Eficiencia y Rendimiento: Minimizando la Manipulación Directa del DOM
Cada vez que JavaScript interactúa con el DOM, el navegador tiene que hacer un trabajo extra (recalcular estilos, redibujar la página). Esto se conoce como «reflow» y «repaint», y pueden ser costosos en términos de rendimiento. Para optimizar el rendimiento:
- Agrupa las operaciones DOM: Si vas a hacer múltiples cambios, intenta hacerlos «offline» y luego inserta el resultado final en el DOM una sola vez. Los
DocumentFragmentsson excelentes para esto. - Minimiza el acceso directo: Almacena las referencias a los elementos del DOM en variables de JavaScript en lugar de buscarlos repetidamente.
Uso Correcto de Selectores: getElementById, querySelector, querySelectorAll
JavaScript ofrece varias formas de seleccionar elementos del DOM. Saber cuál usar optimiza tu código:
document.getElementById('id-del-elemento'): El más rápido, úsalo cuando sepas el ID exacto y único del elemento.document.querySelector('selector-css'): Versátil, acepta cualquier selector CSS. Devuelve el primer elemento que coincide. Ideal para elementos específicos que podrías seleccionar con CSS.document.querySelectorAll('selector-css'): También acepta cualquier selector CSS, pero devuelve unaNodeListde todos los elementos que coinciden. Necesitarás iterar sobre esta lista si quieres afectar a varios elementos.
Para entender más a fondo cómo estos métodos te ayudan a seleccionar elementos, te recomendamos consultar la documentación de MDN Web Docs sobre la manipulación de documentos.
Delegación de Eventos: Optimizando el Manejo de Eventos
Cuando tienes muchos elementos similares (por ejemplo, elementos en una lista generada dinámicamente) a los que quieres añadir el mismo tipo de evento, no es eficiente añadir un addEventListener a cada uno. En su lugar, puedes usar la delegación de eventos. Añades un solo addEventListener a un ancestro común de esos elementos (como su contenedor padre). Cuando un evento se dispara en uno de los elementos hijos, «asciende» hasta el padre, donde tu listener puede capturarlo. Esto es especialmente útil cuando crear elementos HTML con JavaScript DOM después de la carga inicial de la página.
Conclusión: Dominando el DOM para Interactividad Web
Felicidades! Has completado una recopilación esencial de ejercicios DOM JavaScript que cubren validación básica, procesamiento y visualización de datos de formularios, reseteo, y la creación dinámica de contenido HTML. Estas habilidades son fundamentales para cualquier desarrollador web que aspire a construir interfaces de usuario ricas y responsivas.
El DOM es tu lienzo, y JavaScript es tu pincel. Con la práctica constante y la exploración de nuevas propiedades y métodos, te sentirás cada vez más cómodo manipulando cualquier aspecto de tus páginas web. Continúa experimentando con estos ejemplos, modificándolos y aplicándolos a tus propios mini-proyectos para seguir consolidando tu conocimiento y avanzar en la creación de interfaces de usuario dinámicas.
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 4 de 6 el resto en el enlace puedes ver el resto de ejercicios.