La oss se på noen alternativer for iterering over en NodeList, når du kommer tilbake fra å kjøre en document.querySelectorAll.
Vi har skrevet en oppdatert artikkel om dette: A Bunch of Options for Looping Over querySelectorAll NodeLists.
Ikke alle nettlesere støtter hver på NodeLists, men for de som gjør det:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Her er en vanskelig måte å komme seg rundt med litt dypere nettleserstøtte.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Rettferdig advarsel, Todd Motto forklarer hvorfor denne metoden er ganske hacky, og beskriver mer enn 10 problemer med den.
Du kan også bruke en klassiker for loop:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Todds forslag er å lage din egen metode:
// 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! ));Du kan også spre listen selv, som da vil gi deg tilgang til andre matriseringsmetoder mens du er i gang.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Det er også for ... løkker. Firefox var den første som støttet dette, men støtten har blitt ganske bra:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Dette er ganske intenst (sannsynligvis farlig og ikke anbefalt), men du kan få NodeList til å ha den samme for hver funksjon som Array har, og bruk den.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Det er litt mer informasjon i MDN-artikkelen.