Recopilación ejercicios DOM JavaScript-1

Por /

En el vasto universo de la programación, pocos conceptos son tan fundamentales y a la vez tan poderosos como el Document Object Model (DOM). Si alguna vez te has preguntado cómo los sitios web se vuelven interactivos, cómo un clic puede cambiar el contenido de una página, o cómo se actualizan los elementos en tiempo real sin recargar la página, la respuesta a menudo reside en el DOM y su manipulación con JavaScript.

En esta guía exhaustiva, vamos a sumergirnos profundamente en el DOM, explorando no solo su teoría, sino, lo que es más importante, su aplicación práctica a través de una serie de ejercicios DOM JavaScript cuidadosamente diseñados. Desde los conceptos más básicos hasta técnicas más avanzadas, nuestro objetivo es equiparte con las herramientas y el conocimiento necesarios para que puedas transformar cualquier página estática en una experiencia web dinámica y atractiva. Prepárate para escribir código, experimentar y ver tus ideas cobrar vida en el navegador. ¡Comencemos este emocionante viaje

¿Qué es el DOM y por qué es tan importante para tus habilidades de desarrollo web?

Antes de adentrarnos en los ejercicios, es crucial entender qué es exactamente el DOM y por qué se ha convertido en la columna vertebral de la interactividad web.

El Document Object Model (DOM) es una interfaz de programación de aplicaciones (API) para documentos HTML y XML. Lo que esto significa en términos sencillos es que el navegador, cuando carga una página web, no solo lee el código HTML, sino que lo transforma en una estructura de objetos que los lenguajes de scripting, como JavaScript, pueden entender y manipular.

Imagina el DOM como un árbol genealógico de todos los elementos de tu página web. Cada etiqueta HTML (como <html>, <body>, <p>, <div>) se convierte en un «nodo» en este árbol, y estos nodos están organizados de forma jerárquica, reflejando la estructura anidada de tu HTML. Cada nodo tiene propiedades y métodos que te permiten acceder a su contenido, modificar sus atributos, cambiar su estilo, y mucho más.

La estructura de árbol del DOM: Una visión detallada

Para comprender mejor esta metáfora del árbol, consideremos un fragmento de HTML simple:

<!DOCTYPE html>
<html>
<head>
    <title>Mi Página</title>
</head>
<body>
    <h1 id="tituloPrincipal">Bienvenido</h1>
    <p class="introduccion">Este es un párrafo de introducción.</p>
    <div>
        <ul id="listaElementos">
            <li>Elemento 1</li>
            <li>Elemento 2</li>
        </ul>
    </div>
</body>
</html>

Cuando el navegador procesa este código, construye una representación del DOM similar a esta:

  • Document (el nodo raíz de todo el documento)
    • html
      • head
        • title
          • Texto: «Mi Página»
      • body
        • h1 (id=»tituloPrincipal»)
          • Texto: «Bienvenido»
        • p (class=»introduccion»)
          • Texto: «Este es un párrafo de introducción.»
        • div
          • ul (id=»listaElementos»)
            • li
              • Texto: «Elemento 1»
            • li
              • Texto: «Elemento 2»

Cada cuadro representa un nodo. Algunos son nodos de elemento (como h1, p, div), otros son nodos de texto (como «Bienvenido», «Este es un párrafo…»), y también hay nodos de atributo (aunque no se muestran explícitamente en esta representación simplificada, id y class son atributos de los nodos de elemento).

¿Por qué es el DOM tan importante?

La importancia del DOM radica en su capacidad para actuar como un puente entre el HTML/CSS de tu página y el código JavaScript. Sin el DOM, JavaScript no tendría una forma estandarizada de «ver» y «tocar» los elementos de una página web. Aquí te explicamos algunas razones clave por las que es vital dominarlo:

  1. Interactividad Dinámica: El DOM permite que las páginas web respondan a las acciones del usuario. Quieres que un botón haga algo, que un formulario se valide, que una imagen cambie al pasar el ratón por encima. Todo esto se logra manipulando el DOM.
  2. Actualizaciones en Tiempo Real: Con el DOM, puedes actualizar partes de una página sin tener que recargarla por completo. Piensa en un contador que se actualiza cada segundo o una lista de comentarios que aparece sin que la página parpadee.
  3. Personalización y Experiencia de Usuario: Puedes adaptar el contenido y la presentación de una página según las preferencias del usuario, la hora del día, o cualquier otra lógica programada, creando experiencias más ricas y personalizadas.
  4. Validación de Formularios: Antes de enviar datos a un servidor, puedes usar JavaScript y el DOM para verificar que los usuarios han introducido la información correctamente, ofreciendo retroalimentación inmediata.
  5. Animaciones y Efectos Visuales: Aunque CSS puede manejar muchas animaciones, JavaScript, a través del DOM, permite efectos más complejos y controlados, especialmente aquellos que dependen de la lógica programática.

En esencia, el DOM es el lienzo sobre el que JavaScript pinta la interactividad y el dinamismo en la web. Si deseas ir más allá de las páginas estáticas y crear experiencias web verdaderamente atractivas, entender el DOM es un requisito indispensable. Si te interesan los conceptos fundamentales de JavaScript, te invito a explorar más recursos en alediaz.xyz.

Para profundizar aún más en la teoría del DOM, te recomiendo consultar la Documentación del Document Object Model (DOM) de Mozilla y la especificación del DOM del W3C. Estas fuentes autorizadas te darán una base sólida para entender las complejidades de esta API.

Primeros pasos con la manipulación del DOM: ¡Manos a la obra!

Ahora que tenemos una comprensión clara de qué es el DOM, es hora de ensuciarnos las manos con algunos ejercicios prácticos. Empezaremos con las operaciones más comunes: seleccionar elementos y modificar su contenido o atributos.

Seleccionando elementos del DOM: Tu punto de partida

Para manipular cualquier elemento en la página, primero necesitas «seleccionar» o «encontrar» ese elemento dentro del árbol del DOM. JavaScript nos proporciona varios métodos para lograr esto:

  • document.getElementById('id'): El método más directo para seleccionar un elemento por su atributo id. Los IDs deben ser únicos en un documento HTML.
  • document.querySelector('selectorCSS'): Un método moderno y muy versátil que te permite seleccionar el primer elemento que coincide con un selector CSS especificado. Puede ser un ID, una clase, un nombre de etiqueta, o cualquier combinación de selectores CSS.
  • document.querySelectorAll('selectorCSS'): Similar a querySelector, pero devuelve una NodeList (similar a un array) de todos los elementos que coinciden con el selector.
  • document.getElementsByClassName('clase'): Devuelve una HTMLCollection (similar a un array) de todos los elementos que tienen la clase especificada.
  • document.getElementsByTagName('etiqueta'): Devuelve una HTMLCollection de todos los elementos con el nombre de etiqueta especificado.

Para nuestros primeros ejercicios, nos centraremos principalmente en getElementById y querySelector por su simplicidad y versatilidad.

Ejercicio 1: Cambiar el texto de un párrafo con JavaScript

Este es un ejercicio clásico para empezar a manipular el DOM. Queremos que al hacer clic en un botón, el texto de un párrafo cambie.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cambia el texto de un párrafo con JavaScript</title>
</head>
<body>
    <p id="miParrafo">Este es el texto original.</p>
    <button id="cambiarTexto">Cambiar texto</button>

    <script>
        // Aquí irá tu código JavaScript
    </script>
</body>
</html>

JavaScript:

// Cambia el texto de un párrafo con JavaScript
const parrafo = document.querySelector("#miParrafo");
const boton = document.querySelector("#cambiarTexto");

boton.addEventListener("click", () => {
    parrafo.textContent = "El texto ha cambiado.";
});

Explicación:

  1. const parrafo = document.querySelector("#miParrafo");: Seleccionamos el párrafo con el id="miParrafo" y lo almacenamos en una constante llamada parrafo.
  2. const boton = document.querySelector("#cambiarTexto");: Hacemos lo mismo para el botón con el id="cambiarTexto".
  3. boton.addEventListener("click", () => { ... });: Esto es un event listener. Le estamos diciendo al botón que «escuche» un evento de «clic». Cuando el usuario haga clic en el botón, la función que le pasamos (() => { ... }) se ejecutará.
  4. parrafo.textContent = "El texto ha cambiado.";: Dentro de la función, accedemos a la propiedad textContent del nodo parrafo y le asignamos un nuevo valor de texto. Esto actualiza el contenido visible del párrafo en la página.

Ejercicio 2: Cambiar la imagen al hacer clic

Ahora, vamos a hacer algo similar, pero con una imagen. Al hacer clic en un botón, cambiaremos la imagen que se muestra en la página.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cambia una imagen con un click en JavaScript</title>
</head>
<body>
    <img id="imagenCambio" src="./img.js.png" alt="Imagen original" width="200">
    <button id="cambiarImagen">Cambiar imagen</button>

    <script>
        // Aquí irá tu código JavaScript
    </script>
</body>
</html>

JavaScript:

(Asegúrate de tener una imagen img/html5.png en tu proyecto, o cambia la ruta de la segunda imagen a una que exista)

// Cambia una imagen con un click en JavaScript
const imagen = document.querySelector("#imagenCambio");
const boton = document.querySelector("#cambiarImagen");

boton.addEventListener("click", () => {
    imagen.src = "./img.html5.png";
    imagen.alt = "Nueva imagen HTML5";
});

Explicación:

  1. const imagen = document.querySelector("#imagenCambio");: Seleccionamos la imagen por su ID.
  2. const boton = document.querySelector("#cambiarImagen");: Seleccionamos el botón.
  3. imagen.src = "./img.html5.png";: Aquí, en lugar de textContent, accedemos a la propiedad src de la imagen (que es un atributo HTML) y le asignamos la ruta de nuestra nueva imagen.
  4. imagen.alt = "Nueva imagen HTML5";: También es una buena práctica actualizar el texto alternativo (alt) cuando cambias el src para mantener la accesibilidad.

Ejercicio 3: Cambiar el color de fondo de un div al pasar el mouse

Este ejercicio introduce dos eventos importantes: mouseover y mouseout, que nos permiten reaccionar cuando el puntero del ratón entra o sale de un elemento.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cambia el color de fondo de un div al pasar el mouse</title>
    <style>
        #caja {
            width: 200px;
            height: 200px;
            background-color: green; /* Color inicial */
        }
    </style>
</head>
<body>
    <div id="caja">
        <p>Pasa el mouse por aquí</p>
    </div>

    <script>
        // Aquí irá tu código JavaScript
    </script>
</body>
</html>

JavaScript:

// Cambia el color de fondo de un div al pasar el mouse
const caja = document.querySelector("#caja");

// Cambiar color al pasar el mouse
caja.addEventListener("mouseover", () => {
    caja.style.backgroundColor = "blue";
});

// Restaurar color al salir el mouse
caja.addEventListener("mouseout", () => {
    caja.style.backgroundColor = "green";
});

Explicación:

  1. const caja = document.querySelector("#caja");: Seleccionamos el div con ID «caja».
  2. caja.addEventListener("mouseover", () => { ... });: Cuando el puntero del ratón entra en el área de la caja, la función se ejecuta.
  3. caja.style.backgroundColor = "blue";: Accedemos a la propiedad style de la caja y luego a backgroundColor para cambiar su color de fondo a azul. La propiedad style te permite acceder y modificar los estilos CSS en línea de un elemento.
  4. caja.addEventListener("mouseout", () => { ... });: Cuando el puntero del ratón sale del área de la caja, la función se ejecuta, restaurando el color de fondo a verde.

Ejercicio 4: Escribir un mensaje en la consola con el texto de un elemento

Este ejercicio es útil para depuración y para entender cómo acceder al contenido de texto de un elemento y mostrarlo.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hola, soy un párrafo con un mensaje oculto</title>
</head>
<body>
    <p id="mensaje">Hola, soy un párrafo con un mensaje oculto</p>
    <button id="boton">Mostrar en consola</button>

    <script>
        // Aquí irá tu código JavaScript
    </script>
</body>
</html>

JavaScript:

// Escribir un mensaje en la consola con el texto de un elemento
const parrafo = document.querySelector("#mensaje");
const boton = document.querySelector("#boton");

// Evento para imprimir el texto del párrafo en consola
boton.addEventListener("click", () => {
    console.log(parrafo.textContent);
});

Explicación:

  1. const parrafo = document.querySelector("#mensaje");: Seleccionamos el párrafo por su ID.
  2. const boton = document.querySelector("#boton");: Seleccionamos el botón.
  3. console.log(parrafo.textContent);: Al hacer clic en el botón, el textContent del párrafo se imprime en la consola del navegador. Esto es invaluable para verificar si estás seleccionando los elementos correctos y obteniendo el contenido esperado.

Estos primeros ejercicios sientan las bases para cualquier manipulación del DOM. Con la capacidad de seleccionar elementos y modificar sus propiedades básicas, ya tienes un control significativo sobre el contenido y la presentación de tus páginas web.

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

Scroll al inicio

Terms and Conditions - Privacy Policy