Passare una Callback per Lavorare con il DOM in JavaScript

Supponiamo di avere un gruppo di elementi DOM:

<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:

forEach('.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:

forEach('.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:

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

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

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

Sono dati dei paragrafi. Utilizzando la funzione forEach da noi creata, per ogni paragrafo aggiungete alla fine del suo testo un punto esclamativo.