Μεταβίβαση callback για εργασία με DOM σε JavaScript
Ας υποθέσουμε ότι έχουμε μια ομάδα από στοιχεία 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>
Ας φτιάξουμε τη συνάρτηση forEach, η οποία
θα δέχεται ως πρώτη παράμετρο έναν επιλογέα (selector)
μιας ομάδας στοιχείων, και ως δεύτερη παράμετρο - μια συνάρτηση-callback,
η οποία θα εφαρμόζεται με τη σειρά σε κάθε ένα από
τα στοιχεία που βρέθηκαν:
forEach('.elem', function() {
// η συνάρτηση θα εφαρμοστεί σε κάθε στοιχείο
});
Ας τα στοιχεία, που ταιριάζουν με τον επιλογέα, να περνούν με τη σειρά ως πρώτη παράμετρος του callback:
forEach('.elem', function(elem) {
console.log(elem); // θα εμφανίσει με τη σειρά τα στοιχεία που βρέθηκαν
});
Ας χρησιμοποιήσουμε τη συνάρτησή μας για να βρούμε όλα
τα στοιχεία με την κλάση elem και για κάθε
στοιχείο που βρέθηκε να εφαρμόσουμε το callback, που
θα υψώσει στο τετράγωνο το κείμενο κάθε στοιχείου:
forEach('.elem', function(elem) {
elem.textContent = elem.textContent ** 2;
});
Ας γράψουμε τώρα την υλοποίηση της συνάρτησης forEach
που σκεφτήκαμε:
function forEach(selector, func) {
let elems = document.querySelectorAll(selector);
for (let elem of elems) {
func(elem);
}
}
Δίνονται παραγράφοι. Χρησιμοποιώντας τη συνάρτηση forEach που δημιουργήσαμε, για κάθε παράγραφο προσθέστε στο τέλος του κειμένου του ένα θαυμαστικό.