Uso de classList para modificar elementos en el DOM

Primer paso. Generar elementos mediante un bucle

Con un botón vamos a añadir 20 párrafos en un contenedor

Usamos un bucle de tipo for para repetir 20 veces la inserción de un párrafo en el innerHTML del elemento monitor. 


const MONITOR = document.getElementById('monitor');
function addParrafos() {
    let parrafos = '';
    for (let i = 1; i <= 20; i++) {
        parrafos += '<p>Párrafo número ' + i + '</p>';
    }
    MONITOR.innerHTML = parrafos;
}

Segundo paso. Seleccionar todos los elementos con la misma etiqueta dentro del monitor

Necesitamos una colección con todos esos párrafos para poder manipularlos añadiendoles una nueva clase

Los pasos a seguir son:

  1. Uso un selector del DOM por nombre de etiqueta para obtener la colección de párrafos
  2. Recorro la colección con un bucle de tipo for of
  3. Añado a cada elemento de la colección la clase parrafos-monitor usando la propiedad className 

function addClase() {
    const PARRAFOS = MONITOR.getElementsByTagName('p');
    for (const parrafo of PARRAFOS) {
        parrafo.className = 'parrafos-monitor';
    }
}

Tercer paso. Seleccionar todos los párrafos con la clase parrafos-monitor y añadirles una clase nueva.

Ahora se trata de añadir una clase a los párrafos sin eliminar la que ya tienen, usando la propiedad classList

Este es el proceso a ejecutar:

  1. Seleccionar todos los elementos en una colección usando su nombre de clase
  2. Preparar un bucle que recorra todos los elementos de la colección
  3. Modificar las clases de todos los elementos usando la propiedad classList y su método add() 

function addEncencido() {
    const PARRAFOS = MONITOR.getElementsByClassName('parrafos-monitor');
    for (const parrafo of PARRAFOS) {
        parrafo.classList.add('encendido');
    }
    MONITOR.style.display = 'flex';
}

Asignar de forma dinámica una función a un elemento

En este caso modificamos la propiedad onclick de todos los párrfos con la misma clase para que ejecuten una función.

Por una parte necesitamos una función que asigne otra función al hacer click en los párrafos, y por otra, vamos a tener una clase CSS que se aplicará o se eliminará según corresponda del propio elemento sobre el que clicamos.

  1. En primer lugar creamos la función que se ejecutará al hacer clic en los párrafos
  2. Luego accedemos a la colección como en los casos anteriores y la recorremos para asignar la función
  3. Como punto nuevo e importante en este caso es hacer que la misma función actue sobre el propio elemento en el que hacemos clic sin usar ningún tipo de id.

function cambiaOpacidad() {
    this.classList.toggle('opacidad');
}
function asignaClic() {
    const PARRAFOS = MONITOR.getElementsByClassName('parrafos-monitor');
    for (const parrafo of PARRAFOS) {
        parrafo.onclick = cambiaOpacidad;
        parrafo.style.cursor = 'pointer';
        parrafo.style.borderRadius = '50%';
    }
}