clase-8-DOM/ejercicios-clase-8.js

// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.

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()

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()


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")