# 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:
   ```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.

   ```js
   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>
   ```