Clase 8 - El navegador y el DOM

Ejercicios de la clase

0. Seguir los pasos habituales para gestionar con git estos ejercicios:

• Hacer un fork de este repositorio (noten que tiene 'marquez.juan' en la URL).
• Clonar tu fork. (No debería figurar marquez.juan en la URL).
• Crear una nueva rama con switch -c nombre-de-tu-rama
• Hacer git push origin nombre-de-tu-rama
• Desde gitea, crear el pull request, desde la rama recién creada de tu fork hacia la rama main del repositorio que pertenece a marquez.juan. De esta manera el docente puede ir siguiendo tu trabajo y respondiendo las consultas más fácilmente.
• Comenzar a resolver los ejercicios, en el archivo ejercicios-clase-8.js.
• Hacer al menos un commit por cada uno de los ejercicios que siguen.
• Al finalizar cada sesión de trabajo, hacer git push origin nombre-de-tu-rama

1. Crear una función que seleccione el primer <h1> de la página y cambie su texto a otro mensaje. Verificar el resultado en el navegador invocando a la función desde las devtools.

2. Crear otra función que, usando querySelectorAll y for...of, agregue la clase item-lista a cada uno de los items de la lista. Verificar el resultado en el navegador invocando a la función desde las devtools. Debería observarse un cambio de estilo, intenten explicarse por qué sucede esto.

3. Crear una función agregarItem que reciba un texto como parámetro, cree un nuevo <li> con ese texto y lo agregue al final de la lista con id="lista-inicial". Llamarla tres veces con textos distintos desde las devtools.

4. Seleccionar todos los párrafos que estén dentro del div con id="parrafos". Si un párrafo contiene la palabra "importante" en su texto, agregarle la clase "destacado".

5. Crear una función que agregue un nuevo div a la página, que incluya comidas típicas de la región del litoral. Este div debe incluir un h2, un párrafo introductorio y una lista de comidas típicas. Probarla utilizando las devtools.

6. Crear una función limpiarLista que reciba por parámetro el id de una lista, y que elimine todos los <li> de esa lista. Llamarla sobre la lista del ejercicio 2. Pista: querySelectorAll + for...of + remove. Probarla utilizando las devtools, tanto con la lista original de la página como con la lista agregada en el ejercicio anterior.

7. La página contiene el siguiente HTML:

   <img id="foto" src="foto1.jpg" alt="Empanadas">
   

   Escribir el código que cambie el src de la imagen a "foto2.jpg" y el alt a "Locro".

8. Crear una función construirLista que reciba un array de strings y construya dinámicamente y retorne un div con que contenga un título y una lista <ul>, con un <li> por cada elemento del array. Agregar esta lista a la página desde las devtools.

   construirLista(["Comidas mendocinas", "Sopaipilla", "Vino tinto"]);
   // Debe generar y retornar:
   // <div class="grupo-comidas">
   //   <h2>Comidas mendocinas</h2>
   //   <ul>
   //     <li>Sopaipilla</li>
   //     <li>Vino tinto</li>
   //   </ul>
   // </div>