Pasar un callback para trabajar con el DOM en JavaScript
Supongamos que tenemos un grupo de elementos 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>
Creemos una función forEach que
tome como primer parámetro un selector
de un grupo de elementos, y como segundo parámetro - una función callback,
que se aplicará sucesivamente a cada uno de
los elementos encontrados:
forEach('.elem', function() {
// la función se aplicará a cada elemento
});
Hagamos que los elementos que coincidan con el selector pasen sucesivamente al primer parámetro del callback:
forEach('.elem', function(elem) {
console.log(elem); // mostrará sucesivamente los elementos encontrados
});
Usemos nuestra función para encontrar todos
los elementos con la clase elem y para cada
elemento encontrado apliquemos un callback que
eleve al cuadrado el texto de cada elemento:
forEach('.elem', function(elem) {
elem.textContent = elem.textContent ** 2;
});
Escribamos ahora la implementación de la
función forEach que hemos planeado:
function forEach(selector, func) {
let elems = document.querySelectorAll(selector);
for (let elem of elems) {
func(elem);
}
}
Se dan párrafos. Usando la función forEach que creamos, agregue un signo de exclamación al final del texto de cada párrafo.