Blockmaker Academy: Ejercicios de Fundamentos de JavaScript - Manipulación del DOM y eventos en JavaScript

¡Bienvenido al repositorio de ejercicios de Manipulación del DOM y eventos en JavaScript de Blockmaker Academy! Aquí encontrarás una serie de ejercicios diseñados para ayudarte a practicar y comprender cómo seleccionar elementos en el DOM y manipular su contenido y estructura utilizando JavaScript.

Introducción a la Selección de Elementos y Manipulación del DOM

La manipulación del Document Object Model (DOM) es esencial en el desarrollo web para interactuar con los elementos HTML de una página y realizar cambios dinámicos en ella. Este conjunto de ejercicios te permitirá adquirir habilidades en la selección de elementos y la manipulación del DOM.

Objetivo del Repositorio

El objetivo de este repositorio es proporcionarte ejercicios prácticos que te ayudarán a fortalecer tus habilidades en la selección de elementos y la manipulación del DOM en JavaScript. Cada ejercicio se enfoca en un concepto específico y te guiará a través de los pasos necesarios para completarlo con éxito.

Estructura del Repositorio

El repositorio está organizado de la siguiente manera:

• Cada ejercicio tiene su propia carpeta en el repositorio, que contiene los archivos necesarios.
• Dentro de cada carpeta de ejercicio, encontrarás un archivo README.md con las instrucciones detalladas y ejemplos para completar el ejercicio.
• Además de los ejercicios, se proporciona una carpeta "soluciones" con las respuestas completas de cada ejercicio. Puedes consultar estas soluciones como referencia después de intentar resolver los ejercicios por ti mismo.

Ejercicios Incluidos

A continuación, se presentan los ejercicios incluidos en este repositorio:

Selección de Elementos

1. Selección por ID: Selecciona un elemento por su ID único y cambia su contenido utilizando JavaScript.
2. Selección por Clase: Selecciona todos los elementos con una clase específica y cambia sus estilos usando JavaScript.
3. Selección con querySelector: Utiliza querySelector para seleccionar un elemento de un formulario y cambia su valor utilizando JavaScript.
4. Selección con querySelectorAll: Utiliza querySelectorAll para seleccionar todos los elementos de un tipo específico y ocultarlos.
5. Cambio de Contenido con textContent: Cambia el texto contenido dentro de un elemento utilizando textContent en JavaScript.
6. Cambio de Contenido con innerHTML: Modifica el contenido HTML de un elemento utilizando innerHTML en JavaScript.
7. Cambio de Atributos con setAttribute: Utiliza setAttribute para establecer o modificar el valor de un atributo en un elemento HTML.
8. Cambio de Estilos con style: Cambia los estilos de un elemento utilizando la propiedad style en JavaScript.
9. Manipulación de Clases con classList: Agrega una clase a un elemento utilizando classList en JavaScript.
10. Agregar Elemento con appendChild: Utiliza appendChild para agregar un nuevo elemento como hijo de otro elemento existente en el DOM.
11. Eliminar Elemento con removeChild: Utiliza removeChild para eliminar un elemento hijo de su elemento padre en el DOM.
12. Asociar Evento de Clic: Asocia un evento de clic a un botón y muestra un mensaje cuando se hace clic en el botón.
13. Prevenir la Acción por Defecto de un Enlace: Utiliza preventDefault para evitar que un enlace navegue a otra página cuando se hace clic.
14. Detener la Propagación de Evento: Utiliza stopPropagation para evitar que un evento se propague a elementos padre.
15. Delegación de Eventos: Utiliza la delegación de eventos para manejar clics en varios elementos de una lista a través de un elemento padre común.

Eventos Asincrónicos

16. Temporizador de Evento Personalizado: Crea un temporizador que dispare un evento personalizado después de cierto tiempo.

Eventos de Carga

17. Manejo de Evento de Carga de Imagen: Maneja el evento de carga de una imagen y muestra un mensaje cuando la imagen se carga.

Eventos Personalizados

18. Evento Personalizado y Disparo: Crea un evento personalizado y asígneselo a un elemento, luego escucha ese evento y realiza una acción cuando se dispara.

Eventos del Navegador

19. Evento de Cambio de Tamaño de Ventana: Utiliza eventos del navegador como resize para realizar cambios en la página cuando ocurran estos eventos.

¡Comienza a Practicar!

Selecciona un ejercicio y sigue las instrucciones en el archivo README.md para completarlo. Aprende a seleccionar elementos, manipular el DOM y responder a eventos utilizando JavaScript. ¡Diviértete explorando y mejorando tus habilidades en JavaScript!