Modificar colecciones de elementos desde JS

Necesitamos una función que haga 3 cosas:

1. Obtener la colección de elementos que vamos a manipular
2. Acceder a cada uno de los elementos de la colección
3. Modificar su contenido

function diasSemana() {
    let dias = document.getElementById('semana').getElementsByClassName('dia-semana');
    dias[0].textContent = '1: Lunes';
    dias[1].textContent = '2: Martes';
    dias[2].textContent = '3: Miércoles';
    dias[3].textContent = '4: Jueves';
    dias[4].textContent = '5: Viernes';
    dias[5].textContent = '6: Sábado';
    dias[6].textContent = '7: Domingo';
    dias[6].style.color = 'red';
}

            

Para acceder al primer elemento siempre usamos la posición cero(0), pero para saber cuál es el último elemento necesitamos saber la cantidad exacta de elementos que tiene la colección. La posición del último elemento siempre será igual a la cantidad total menos 1.

La cantidad total nos la devuelve la propiedad length de la colección, por lo tanto la última posición de una colección será: colección.length - 1

1. Creo la función
2. Accedo a la colección con el método que devuelve todos los elementos con la misma clase
3. Por comodidad, defino una variable que devuelva la última posición, que siempre es la cantidad total de elementos de la colección menos 1 (porque la primera posición es cero)
4. Accedo a el primer y último elemento y los modifico usando la sintaxis de índice.

function formatPosicion() {
    let posiciones = document.getElementById('grupo').getElementsByClassName('posicion');
    let ultimo = posiciones.length - 1;
    posiciones[0].style.backgroundColor = 'yellow';
    posiciones[0].style.color = 'orange';
    posiciones[ultimo].style.backgroundColor = 'yellow';
    posiciones[ultimo].style.color = 'orange';
}
        

En este caso necesitamos un bucle para recorrer toda la colección y modificar cada uno de sus elementos. Como vamos a llamar a la colección desde cada una de las funciones asociadoas a los dos botones, definiremos la colección en una variable global que esté accesible para todo el script.

Como se trata de recorrer una colección, podemos usar la versión del bucle for of.

1. Defino la variable que apunte a la colección de elementos con la misma clase
2. Creo la función para el primer botón
3. Preparo el bucle que recorre la colección
4. Modifico las propiedades de cada elemento dentro del bucle
5. Hago lo mismo para el segundo botón

let posiciones = document.getElementById('grupo').getElementsByClassName('posicion');
function ancho100() {
    for (const parrafo of posiciones) {
    parrafo.style.width = '100px';
    parrafo.style.backgroundColor = 'darkcyan';
    }
}
function borraAncho() {
    for (const parrafo of posiciones) {
    parrafo.style.width = 'auto';
    parrafo.style.backgroundColor = 'transparent';
    }
}
                

La tarea va a consistir en modificar el innerHTML del nodo OL añadiendo nodos de tipo LI tantas veces como nos indique el valor del INPUT. Para eso necesitamos usar una estructura de tipo bucle

1. Creamos una función para realizar la tarea
2. Leemos el valor del input y lo guadamos en una variable llamada contador
3. Creamos una variable vacía que contendrá el innerHTML del elemento ol y la llamamos contenido.
4. Preparamos un bucle que se repita tantas veces como nos dice el input
5. Dentro del bucle actualizamos la variable contenido con el nuevo elemento li, añadiendo el número de iteración a su contenido
6. Fuera del bucle, pasamos el contenido actualizado al ol

function creaElementos() {
    let contador = document.getElementById('num_elementos').value;
    contador = parseInt(contador);
    let contenido = '';
    for (let i = 1; i <= contador; i++) {
        contenido = contenido + '<li class="elemento">Elemento Dinámico ' + i +'</li>'
    }
    document.getElementById('numerados').innerHTML = contenido;
}