forked from marquez.juan/clase-8-DOM
112 lines
3.6 KiB
JavaScript
112 lines
3.6 KiB
JavaScript
// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
|
|
|
|
//EJERCICIO 1
|
|
|
|
function cambiarPrimerTitulo() {
|
|
// 1. Selecciono el primer h1 de la página usando querySelector
|
|
const titulo = document.querySelector("h1");
|
|
|
|
// 2. Verifico que el elemento exista para evitar errores
|
|
if (titulo) {
|
|
// 3. Cambio su contenido de texto
|
|
titulo.textContent = "¡Texto cambiado con JavaScript!";
|
|
console.log("El título ha sido modificado exitosamente.");
|
|
} else {
|
|
console.log("No se encontró ningún elemento <h1> en la página.");
|
|
}
|
|
}
|
|
|
|
//Verificar llamando a la funcion en consola
|
|
//cambiarPrimerTitulo()
|
|
|
|
//EJERCICIO 2
|
|
|
|
function aplicarEstiloALista() {
|
|
// 1. Selecciono todos los elementos <li> de la página
|
|
const items = document.querySelectorAll("li");
|
|
|
|
// 2. Recorro la lista de elementos usando for...of
|
|
for (const item of items) {
|
|
// 3. Agrego la clase "item-lista" a cada elemento
|
|
item.classList.add("item-lista");
|
|
}
|
|
console.log("Clase agregada a todos los elementos de la lista.");
|
|
}
|
|
|
|
//Verificar llamando a la funcion en consola
|
|
//aplicarEstiloALista()
|
|
|
|
|
|
//EJERCICIO 3
|
|
|
|
function agregarItem(texto) {
|
|
// 1. Selecciono la lista usando su id (#lista-inicial)
|
|
const lista = document.querySelector("#lista-inicial");
|
|
|
|
// 2. Creo el nuevo elemento <li> en memoria
|
|
const nuevoLi = document.createElement("li");
|
|
|
|
// 3. Le asigno el texto recibido por parámetro
|
|
nuevoLi.textContent = texto;
|
|
|
|
// 4. Verifico si la lista existe y lo agrego al final
|
|
if (lista) {
|
|
lista.appendChild(nuevoLi);
|
|
} else {
|
|
console.log("Error: No se encontró la lista con id='lista-inicial'");
|
|
}
|
|
}
|
|
|
|
//Verificar llamando a la funcion en consola
|
|
//agregarItem("Chinchulines")
|
|
|
|
//EJERCICIO 4
|
|
|
|
// 1. Selecciono todos los párrafos que son descendientes del div con id "parrafos"
|
|
const parrafos = document.querySelectorAll("#parrafos p");
|
|
|
|
// 2. Recorro la lista de elementos
|
|
for (const p of parrafos) {
|
|
// 3. Verifico si el texto del párrafo incluye la palabra "importante"
|
|
// Usamos el método .includes() de los strings de JavaScript
|
|
if (p.textContent.includes("importante")) {
|
|
// 4. Si la contiene, agregamos la clase "destacado" sin pisar las existentes
|
|
p.classList.add("destacado");
|
|
}
|
|
}
|
|
|
|
//EJERCICIO 5
|
|
|
|
function agregarSeccionLitoral() {
|
|
// 1. Creo el contenedor principal
|
|
const contenedorComidas = document.createElement("div");
|
|
|
|
// 2. Creo y configuro el título h2
|
|
const titulo = document.createElement("h2");
|
|
titulo.textContent = "Comidas Típicas del Litoral";
|
|
|
|
// 3. Creo y configuro el párrafo introductorio
|
|
const parrafo = document.createElement("p");
|
|
parrafo.textContent = "La gastronomía del litoral argentino se destaca por sus platos a base de pescados de río y la influencia de la cultura guaraní.";
|
|
|
|
// 4. Creo la lista y sus elementos
|
|
const lista = document.createElement("ul");
|
|
const platos = ["Surubí a la parrilla", "Pacú frito", "Chipa", "Sopa paraguaya"];
|
|
|
|
for (const plato of platos) {
|
|
const item = document.createElement("li");
|
|
item.textContent = plato;
|
|
lista.appendChild(item);
|
|
}
|
|
|
|
// 5. Armo la estructura: meto el h2, el p y la ul dentro del div
|
|
contenedorComidas.appendChild(titulo);
|
|
contenedorComidas.appendChild(parrafo);
|
|
contenedorComidas.appendChild(lista);
|
|
|
|
// 6. Finalmente, inserto el div completo al final del body de la página
|
|
document.body.appendChild(contenedorComidas);
|
|
|
|
console.log("Sección del litoral agregada exitosamente.");
|
|
}
|