Oglejmo si nekaj možnosti za ponavljanje nad a NodeList, ko se vrnete iz vodenja a document.querySelectorAll.
O tem smo napisali posodobljen članek: Kup možnosti za zapiranje querySelectorAll NodeLists.
Ne podpirajo vsi brskalniki forEach na seznamih vozlišč, ampak tisti, ki podpirajo:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Tukaj je zapleten način, kako to rešiti z nekoliko globljo podporo brskalnika.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Pošteno opozorilo, Todd Motto pojasnjuje, zakaj je ta metoda precej trmast, in opisuje več kot 10 težav z njo.
Lahko uporabite tudi klasično for zanko:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Toddov predlog je, da naredite svojo metodo:
// 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! ));Seznam lahko tudi sami razširite, kar vam bo omogočilo dostop do drugih metod matrike, ko ste že pri tem.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Obstajajo tudi za ... zanke. Firefox je bil prvi, ki je to podprl, vendar je podpora postala precej dobra:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )To je precej intenzivno (verjetno nevarno in ni priporočljivo), vendar bi lahko omogočili, da ima NodeList enako forEach funkcijo kot Array, nato pa jo uporabite.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))V članku MDN je nekaj več informacij.