Ας δούμε μερικές επιλογές για επανάληψη πάνω από ένα NodeList, καθώς επιστρέφετε από την εκτέλεση ενός document.querySelectorAll.
Έχουμε γράψει ένα ενημερωμένο άρθρο σχετικά με αυτό: Μια δέσμη επιλογών για Looping Over querySelectorAll NodeLists.
Δεν υποστηρίζουν όλα τα προγράμματα περιήγησης για Κάθε σε NodeLists, αλλά για εκείνους που κάνουν:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Εδώ είναι ένας δύσκολος τρόπος για να το ξεπεράσετε με λίγο βαθύτερη υποστήριξη του προγράμματος περιήγησης.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Δίκαιη προειδοποίηση, ο Todd Motto εξηγεί γιατί αυτή η μέθοδος είναι μάλλον χακαρή, με λεπτομέρειες πάνω από 10 προβλήματα με αυτήν.
Θα μπορούσατε επίσης να χρησιμοποιήσετε ένα κλασικό για βρόχο:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Η πρόταση του Todd είναι να φτιάξετε τη δική σας μέθοδο:
// forEach method, could be shipped as part of an Object Literal/Module var forEach = function (array, callback, scope) ( for (var i = 0; i < array.length; i++) ( callback.call(scope, i, array(i)); // passes back stuff we need ) ); // Usage: // optionally change the scope as final parameter too, like ECMA5 var myNodeList = document.querySelectorAll('li'); forEach(myNodeList, function (index, value) ( console.log(index, value); // passes index + value back! ));Μπορείτε επίσης να διαδώσετε τη λίστα μόνοι σας, η οποία θα σας έδινε πρόσβαση σε άλλες μεθόδους συστοιχίας ενώ βρίσκεστε σε αυτήν.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Υπάρχουν επίσης για… βρόχους. Ο Firefox ήταν ο πρώτος που το υποστήριξε, αλλά η υποστήριξη έγινε αρκετά καλή:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Αυτό είναι αρκετά έντονο (πιθανώς επικίνδυνο και δεν συνιστάται), αλλά θα μπορούσατε να κάνετε το NodeList να έχει την ίδια λειτουργία για κάθε λειτουργία με το Array και, στη συνέχεια, να το χρησιμοποιήσετε.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Υπάρχουν λίγο περισσότερες πληροφορίες στο άρθρο MDN.