Passare una Callback per Lavorare con il DOM in JavaScript

Supponiamo di avere un gruppo di elementi DOM:

html<p class="elem">1</p>
<p class="elem">2</p>
<p class="elem">3</p>
<p class="elem">4</p>
<p class="elem">5</p>

Creiamo una funzione forEach che accetti come primo parametro un selettore del gruppo di elementi e come secondo parametro - una funzione di callback, che verrà applicata in sequenza a ciascuno degli elementi trovati:

javascriptforEach('.elem', function() {
  // la funzione verrà applicata a ogni elemento
});

Facciamo in modo che gli elementi corrispondenti al selettore vengano passati uno per uno nel primo parametro della callback:

javascriptforEach('.elem', function(elem) {
  console.log(elem); // visualizzerà in sequenza gli elementi trovati
});

Utilizziamo la nostra funzione per trovare tutti gli elementi con classe elem e per ciascun elemento trovato applichiamo una callback che eleverà al quadrato il testo di ogni elemento:

javascriptforEach('.elem', function(elem) {
  elem.textContent = elem.textContent ** 2;
});

Scriviamo ora l'implementazione della funzione forEach che abbiamo ideato:

javascriptfunction forEach(selector, func) {
  let elems = document.querySelectorAll(selector);
  
  for (let elem of elems) {
    func(elem);
  }
}