Recopilación de ejercicios DOM JavaScript 2

Por /

¿Alguna vez te has preguntado cómo las páginas web cobran vida, reaccionan a tus clics, actualizan contenido en tiempo real o cambian de aspecto según tus acciones? La respuesta está en el DOM de JavaScript, una pieza fundamental para cualquier desarrollador web que busque crear experiencias de usuario dinámicas e interactivas.

En esta completa guía, no solo te presentaremos los conceptos clave del Document Object Model (DOM), sino que también te sumergirás en una serie de ejercicios DOM JavaScript prácticos y claros, diseñados para que aprendas haciendo. Desde la manipulación básica de elementos hasta la gestión de eventos complejos, este post es tu hoja de ruta para dominar la interacción web.

Introducción al DOM: ¿Qué es y por qué es importante?

El Document Object Model (DOM) es una interfaz de programación para documentos HTML y XML. Representa la página para que los programas puedan cambiar la estructura del documento, su estilo y contenido. En esencia, el navegador web convierte tu código HTML en una estructura de objetos que JavaScript puede leer y manipular. Imagina el DOM como un árbol genealógico, donde cada etiqueta HTML (como <body>, <div>, <p>) es un «nodo» que tiene relaciones con otros nodos (padres, hijos y hermanos).

La importancia del DOM en el desarrollo web moderno es incuestionable. Permite a JavaScript interactuar con la página, modificando su contenido, estilos y la forma en que los usuarios interactúan con ella. Sin el DOM, las páginas web serían estáticas y carecerían de la interactividad que esperamos hoy en día. Gracias a él, podemos construir desde formularios dinámicos hasta complejas aplicaciones de una sola página (SPA). Para profundizar en los fundamentos de JavaScript, te recomendamos explorar nuestro artículo sobre fundamentos de JavaScript esenciales.

Según el W3C DOM Living Standard, el DOM no es solo una representación del documento, sino una API que facilita la manipulación programática del contenido. Esto subraya su rol central en la creación de experiencias web ricas.

Acceso y Selección de Elementos DOM

Antes de poder manipular cualquier cosa en el DOM, primero necesitas saber cómo acceder a los elementos. JavaScript ofrece varios métodos para seleccionar nodos individuales o colecciones de nodos, lo que te permite apuntar con precisión a lo que quieres modificar.

Métodos Comunes para Seleccionar Elementos

  • getElementById(): Selecciona un elemento por su atributo id. Es el método más rápido y directo para un elemento único.
  • querySelector(): Selecciona el primer elemento que coincide con un selector CSS especificado.
  • querySelectorAll(): Selecciona todos los elementos que coinciden con un selector CSS especificado, devolviendo una NodeList.
  • getElementsByClassName(): Selecciona todos los elementos con una clase CSS específica.
  • getElementsByTagName(): Selecciona todos los elementos de un nombre de etiqueta HTML específico.

Para una comprensión más profunda de los Elementos HTML, puedes consultar nuestra guía dedicada. La Mozilla Developer Network (MDN) es una excelente referencia para explorar todos estos métodos y sus propiedades.

Manipulación de Contenido y Atributos

Una vez que tienes acceso a un elemento, puedes modificar su contenido, atributos, o incluso añadir y eliminar elementos por completo. Aquí es donde la magia del DOM realmente sucede.

Propiedades Clave para la Manipulación

  • textContent: Permite obtener o establecer el contenido de texto de un nodo y sus descendientes.
  • innerHTML: Permite obtener o establecer el contenido HTML (incluyendo etiquetas) de un nodo. ¡Ten cuidado con la inyección de código!
  • setAttribute(): Establece el valor de un atributo en el elemento especificado.
  • removeAttribute(): Elimina un atributo del elemento especificado.
  • classList.add(), classList.remove(), classList.toggle(): Manipula las clases CSS de un elemento, lo que es crucial para cambiar su estilo dinámicamente.

Manipulación de Eventos: Respondiendo a la Interacción del Usuario

El DOM no solo te permite cambiar la estructura y el contenido de una página, sino que también te permite hacer que la página sea interactiva. Esto se logra a través de la gestión de eventos, que son acciones que ocurren en el navegador (como clics, movimientos del ratón, pulsaciones de teclas, etc.) a las que puedes responder con código JavaScript.

addEventListener(): El Corazón de la Interactividad

El método addEventListener() es la forma más común y recomendada de adjuntar controladores de eventos a los elementos. Permite definir una función que se ejecutará cuando ocurra un evento específico en un elemento dado.

Sintaxis básica: elemento.addEventListener('nombreDelEvento', funcionControladora);

Ejercicios Prácticos de Manipulación del DOM y Eventos

A continuación, exploraremos los ejercicios presentados en el vídeo, detallando el código HTML y JavaScript para cada uno, y explicando su funcionamiento. Estos ejemplos te proporcionarán una base sólida para entender cómo interactuar con el DOM de manera efectiva. Si estás interesado en el panorama completo del desarrollo web, te invitamos a revisar nuestra guía.

Ejercicio 1: Contador de Clicks con JavaScript

Este ejercicio demuestra cómo usar addEventListener para detectar un clic en un botón y actualizar un contador en tiempo real en la página. Es un ejemplo clásico para entender la interacción básica entre el usuario y el DOM.

Objetivo: Incrementar un contador cada vez que se hace clic en un botón.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contar cuántas veces se ha hecho click a un botón</title>
</head>
<body>
    <button id="contador">Haz clic aquí</button>
    <p id="resultado">Has hecho clic 0 veces.</p>

    <script>
        // Seleccionamos elementos
        const boton = document.querySelector("#contador");
        const resultado = document.querySelector("#resultado");

        // Variable para contar los clics
        let contador = 0;

        // Evento para aumentar el contador
        boton.addEventListener("click", () => {
            contador++;
            resultado.textContent = `Has hecho clic ${contador} veces.`;
        });
    </script>
</body>
</html>

Explicación:

  1. Selección de Elementos:
    • const boton = document.querySelector("#contador"); selecciona el botón con el id="contador".
    • const resultado = document.querySelector("#resultado"); selecciona el párrafo donde se mostrará el contador, con el id="resultado".
  2. Variable del Contador:
    • let contador = 0; inicializa una variable contador a 0. Usamos let porque su valor cambiará.
  3. Manejador de Eventos:
    • boton.addEventListener("click", () => { ... }); adjunta un «escuchador de eventos» al botón. Cuando se detecta un evento de click en boton, la función de flecha () => { … }` se ejecuta.
    • Dentro de la función:
      • contador++; incrementa el valor de contador en 1.
      • resultado.textContent = \Has hecho clic ${contador} veces.`;actualiza el contenido de texto del párraforesultado para mostrar el valor actual del contador. Se utiliza un *template literal* ( ) para insertar fácilmente la variable contador` en la cadena de texto.

Este ejercicio ilustra de manera efectiva cómo JavaScript puede manipular el contenido textual de un elemento HTML en respuesta a la interacción del usuario.

Ejercicio 2: Detectar Entradas y Salidas del Ratón en un Div

Este ejercicio se enfoca en los eventos de ratón mouseover y mouseout, que son útiles para crear efectos visuales o mostrar información cuando el usuario interactúa con un área específica de la página.

Objetivo: Cambiar el texto dentro de un div cuando el ratón entra y sale de él.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detectar cuando el ratón está fuera de un div</title>
    <style>
        #caja {
            background-color: green;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="caja" style="background-color: green; width:200px; height:200px;">
        Estás fuera del div
    </div>

    <script>
        // Seleccionamos elementos
        const caja = document.querySelector("#caja");

        // Evento para saber cuando está dentro
        caja.addEventListener("mouseover", () => {
            caja.textContent = "Estás dentro del div";
        });

        // Evento para saber cuando está fuera
        caja.addEventListener("mouseout", () => {
            caja.textContent = "Estás fuera del div";
        });
    </script>
</body>
</html>

Explicación:

  1. Estilo CSS:
    • El CSS incluido en el <head> (y también como estilo en línea en el div) da al div con id="caja" un fondo verde y dimensiones, haciéndolo visible y permitiendo la interacción con el ratón.
  2. Selección de Elemento:
    • const caja = document.querySelector("#caja"); selecciona el div que vamos a monitorear.
  3. Manejadores de Eventos:
    • caja.addEventListener("mouseover", () => { ... }); reacciona cuando el puntero del ratón entra en el área del div. Al ocurrir, actualiza el textContent del div a «Estás dentro del div».
    • caja.addEventListener("mouseout", () => { ... }); reacciona cuando el puntero del ratón sale del área del div. En este caso, el textContent del div se restablece a «Estás fuera del div».

Este ejercicio es excelente para entender cómo manejar eventos de ratón para proporcionar retroalimentación visual al usuario, una técnica común en la creación de interfaces más intuitivas.

Ejercicio 3: Mostrar el Valor de un Input en Tiempo Real (Evento input)

Este ejemplo es crucial para entender cómo capturar y mostrar el valor de los campos de entrada de texto a medida que el usuario escribe, sin necesidad de un envío de formulario o un clic en un botón.

Objetivo: Mostrar en tiempo real el texto que el usuario escribe en un campo de entrada.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mostrar el valor de un input en tiempo real (evento input)</title>
</head>
<body>
    <label for="campo">Escribe algo:</label>
    <input type="text" id="campo" placeholder="Escribe aquí...">
    <p>Valor actual: <span id="resultado"></span></p>

    <script>
        // Seleccionamos elementos
        const input = document.querySelector("#campo");
        const resultado = document.querySelector("#resultado");

        // Escuchar evento input
        input.addEventListener("input", () => {
            resultado.textContent = input.value;
        });
    </script>
</body>
</html>

Explicación:

  1. Elementos del Formulario:
    • Se incluye una etiqueta (<label>) y un campo de entrada de texto (<input type="text">) con el id="campo".
    • Un <span> con el id="resultado" se utiliza para mostrar el valor del input.
  2. Selección de Elementos:
    • const input = document.querySelector("#campo"); selecciona el campo de entrada.
    • const resultado = document.querySelector("#resultado"); selecciona el <span> donde se mostrará el resultado.
  3. Manejador de Eventos input:
    • input.addEventListener("input", () => { ... }); adjunta un escuchador para el evento input. Este evento se dispara cada vez que el valor del campo de entrada cambia (es decir, cada vez que el usuario escribe o borra un carácter).
    • resultado.textContent = input.value; dentro del manejador, el textContent del <span> resultado se actualiza con el value actual del input. El value de un campo input contiene el texto que el usuario ha introducido.

Este ejercicio es fundamental para construir interfaces de usuario que proporcionen retroalimentación instantánea, como campos de búsqueda con sugerencias en tiempo real o contadores de caracteres.

Ejercicio 4: Detectar si se Presiona la Tecla Enter en un Campo de Texto

Este ejercicio avanzado muestra cómo no solo detectar una pulsación de tecla, sino también cómo identificar qué tecla específica fue presionada. Esto abre la puerta a funcionalidades más complejas, como enviar un formulario al presionar «Enter» o activar atajos de teclado.

Objetivo: Mostrar un mensaje cuando el usuario presiona la tecla «Enter» en un campo de texto, mostrando el valor del campo.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detectar si se presiona la tecla enter en un campo de texto</title>
</head>
<body>
    <label for="campo">Escribe algo y presiona Enter:</label>
    <input type="text" id="campo" placeholder="Escribe aquí...">
    <p id="mensaje"></p>

    <script>
        // Seleccionamos elementos
        const input = document.querySelector("#campo");
        const mensaje = document.querySelector("#mensaje");

        // Escuchamos el evento keydown
        input.addEventListener("keydown", (event) => {
            if (event.key === "Enter") {
                mensaje.textContent = `Presionaste enter con el valor: ${input.value}`;
            }
        });
    </script>
</body>
</html>

Explicación:

  1. Elementos del Formulario:
    • Similar al ejercicio anterior, tenemos un <label> y un <input type="text"> con id="campo".
    • Un párrafo con id="mensaje" se utilizará para mostrar el resultado.
  2. Selección de Elementos:
    • const input = document.querySelector("#campo"); selecciona el campo de entrada.
    • const mensaje = document.querySelector("#mensaje"); selecciona el párrafo para el mensaje.
  3. Manejador de Eventos keydown:
    • input.addEventListener("keydown", (event) => { ... }); adjunta un escuchador para el evento keydown. Este evento se dispara cuando una tecla es presionada. Es importante notar que la función de callback recibe un objeto event como argumento, que contiene información detallada sobre el evento.
    • if (event.key === "Enter") { ... } es la parte clave. Accedemos a la propiedad key del objeto event para verificar qué tecla fue presionada. Si la tecla es «Enter», el bloque de código dentro del if se ejecuta.
    • mensaje.textContent = \Presionaste enter con el valor: ${input.value}`;actualiza eltextContentdel párrafomensaje` para indicar que «Enter» fue presionado y muestra el valor actual del campo de entrada.

Este ejercicio es fundamental para implementar interacciones más ricas basadas en el teclado, mejorando la usabilidad y accesibilidad de tus aplicaciones web.

Consejos Avanzados para Trabajar con el DOM

Trabajar con el DOM es un arte que mejora con la práctica. Aquí tienes algunos consejos adicionales para optimizar tu código y evitar problemas comunes:

  • Rendimiento: Las operaciones del DOM pueden ser costosas en términos de rendimiento. Intenta minimizar las manipulaciones directas del DOM, especialmente en bucles o funciones que se ejecutan con frecuencia. Puedes agrupar las actualizaciones o usar fragmentos de documentos (DocumentFragment) para construir el contenido fuera del DOM visible y luego insertarlo de una sola vez. Herramientas como las de Google Developers ofrecen guías detalladas para optimizar el rendimiento de tus aplicaciones web.
  • Delegación de Eventos: Para un rendimiento superior y un código más limpio, especialmente con muchos elementos interactivos, considera la delegación de eventos. En lugar de adjuntar un escuchador de eventos a cada elemento individual, puedes adjuntar uno solo a un elemento padre. Cuando un evento se propaga (burbujea) desde un elemento hijo, el escuchador del padre puede detectar el evento y determinar qué elemento hijo lo originó.
  • Comprender la Cola de Eventos: JavaScript es un lenguaje de un solo hilo, lo que significa que las operaciones DOM y los manejadores de eventos se procesan en una cola. Comprender cómo funciona el event loop te ayudará a depurar problemas de rendimiento y entender el flujo de ejecución de tu código.
  • Manejo de Errores: Siempre es una buena práctica incluir manejo de errores al interactuar con el DOM, especialmente cuando se trabaja con elementos que pueden no existir. Por ejemplo, verifica si document.querySelector() devuelve null antes de intentar manipular el elemento.

Compatibilidad y Rendimiento

La compatibilidad del DOM entre diferentes navegadores es generalmente alta, pero siempre es bueno verificar. Herramientas como Can I use? te permiten consultar el soporte de diversas características web en distintos navegadores, asegurando que tu código funcione como esperas para tu audiencia. En cuanto al rendimiento, la clave está en manipular el DOM de forma eficiente y evitar operaciones que disparen recálculos de estilo o redibujados innecesarios.

Conclusión

La manipulación del DOM con JavaScript es una habilidad esencial para cualquier desarrollador web que aspire a crear experiencias de usuario atractivas y funcionales. A través de los ejercicios prácticos proporcionados, hemos cubierto los fundamentos del acceso a elementos, la modificación de contenido y atributos, y la gestión de eventos.

Dominar estas técnicas te permitirá transformar páginas estáticas en interfaces dinámicas que responden a cada interacción del usuario. Recuerda practicar constantemente y experimentar con tus propios proyectos para solidificar tus conocimientos. El DOM es tu lienzo; JavaScript, tu pincel. ¡Empieza a crear!

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 2 de 6 el resto en el enlace puedes ver el resto de ejercicios.

Preguntas Frecuentes

¿Qué es el DOM en JavaScript?

El DOM (Document Object Model) es una interfaz de programación que permite a JavaScript acceder y manipular el contenido, la estructura y el estilo de documentos HTML y XML. Lo representa como una estructura de árbol de objetos, donde cada parte del documento (elementos, atributos, texto) es un nodo.

¿Cuál es la diferencia entre textContent e innerHTML?

textContent obtiene o establece solo el contenido textual de un nodo y sus descendientes, ignorando cualquier etiqueta HTML. innerHTML obtiene o establece todo el contenido HTML de un nodo, incluyendo las etiquetas. Usar innerHTML con datos no confiables puede llevar a vulnerabilidades de seguridad como la inyección de scripts.

¿Por qué es importante addEventListener() para la interactividad web?

addEventListener() es crucial porque permite adjuntar funciones (manejadores de eventos) que se ejecutarán cuando ocurran eventos específicos (como clics, movimientos del ratón, pulsaciones de teclas) en los elementos del DOM. Esto habilita la creación de interfaces de usuario dinámicas y reactivas.

¿Cómo puedo evitar problemas de rendimiento al manipular el DOM?

Para evitar problemas de rendimiento, minimiza las manipulaciones directas del DOM, especialmente en bucles. Agrupa los cambios y actualiza el DOM una sola vez, o utiliza DocumentFragment para construir y luego insertar contenido de manera eficiente. También puedes aplicar la delegación de eventos para reducir el número de escuchadores.

¿Se pueden aplicar estilos CSS directamente usando JavaScript DOM?

Sí, puedes aplicar estilos CSS directamente manipulando la propiedad style de un elemento. Por ejemplo, elemento.style.backgroundColor = 'red';. Sin embargo, la práctica recomendada es manipular las clases CSS de un elemento (classList.add(), classList.remove(), classList.toggle()) y dejar que CSS defina los estilos para esas clases, lo que resulta en un código más limpio y fácil de mantener.

Scroll al inicio

Terms and Conditions - Privacy Policy