Vaatame mõningaid võimalusi a-ga kordamiseks, kui a-ga NodeListtöötamisest tagasi saate document.querySelectorAll.
Oleme selle kohta kirjutanud ajakohastatud artikli: hulgaliselt valikuid päringu lekitamiseks querySelectorAll NodeLists.
Mitte kõik brauserid ei toeta üksusi NodeLists'is igaühele, kuid neile, kes seda teevad:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Siin on keeruline viis, kuidas sellest natuke sügavama brauseritoega üle saada.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Õiglane hoiatus, Todd Motto selgitab, miks see meetod on üsna häkkinud, kirjeldades sellega üle 10 probleemi.
Võite kasutada ka silmuseks klassikat:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Toddi soovitus on teha oma meetod:
// 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! ));Samuti saate loendi ise levitada, mis annaks teile juurdepääsu selle ajal teistele massiivi meetoditele.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Samuti on olemas ... silmuseid. Firefox oli esimene, kes seda toetas, kuid tugi on muutunud üsna heaks:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )See on üsna intensiivne (tõenäoliselt ohtlik ja pole soovitatav), kuid võite panna NodeListi funktsiooni Sama funktsiooni kasutama massiivi jaoks, siis kasutage seda.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))MDN-i artiklis on natuke rohkem teavet.