Pogledajmo neke opcije za ponavljanje a NodeList, dok se vraćate iz pokretanja a document.querySelectorAll.
O ovome smo napisali ažurirani članak: Hrpa opcija za prevlačenje querySelectorAll NodeLists.
Nisu svi preglednici podržani zaEach na NodeLists, ali za one koji to čine:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Evo lukavog načina kako to zaobići s malo dubljom podrškom preglednika.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Pošteno upozorenje, Todd Motto objašnjava zašto je ova metoda prilično nesretna, detaljno opisujući preko 10 problema s njom.
Možete koristiti i klasičnu for petlju:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Toddov prijedlog je da napravite vlastitu metodu:
// 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! ));Popis možete i sami proširiti, što bi vam omogućilo pristup drugim metodama niza dok ste za tim.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Postoje i za ... petlje. Firefox je prvi to podržao, ali podrška je postala prilično dobra:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Ovo je prilično intenzivno (vjerojatno opasno i ne preporučuje se), ali mogli biste učiniti da NodeList ima istu funkciju forEach kao i Array, a zatim ga upotrijebite.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))U članku MDN-a nalazi se malo više informacija.