summarize a function that selects multiple elements

Issue

I made a function that changed the colors of my site when I clicked (a light-mode-theme), and with that, I had to select the elements that would have their colors changed, one by one, which left the code huge. how could i summarize this selection?

    let h = document.querySelector('header');
    h.classList.toggle('bright-mode');
    let b = document.querySelector('body');
    b.classList.toggle('bright-mode');
    let h1 = document.querySelector('h1');
    h1.classList.toggle('bright-mode');
    let h2 = document.querySelector('h2');
    h2.classList.toggle('bright-mode');
    let h3 = document.querySelector('h3');
    h3.classList.toggle('bright-mode');
    let h4 = document.querySelector('h4');
    h4.classList.toggle('bright-mode');
    let si = document.querySelector('.section-inicio');
    si.classList.toggle('bright-mode');
    let ss = document.querySelector('.section-sobre');
    ss.classList.toggle('bright-mode');
    let sl = document.querySelector('.section-linguagens');
    sl.classList.toggle('bright-mode');
}

Solution

Why not just select them all at once with querySelectorAll and then just loop through them and toggle the class?

document.querySelectorAll('header, body, h1, h2, h3, h4, .section-inicio, .section-sobre, .section-linguagens').forEach( el => el.classList.toggle('bright-mode') )

just 1 line of code ;)

Answered By - KubiQ