Să ne uităm la câteva opțiuni pentru iterarea peste un NodeList, pe măsură ce reveniți de la rularea unui document.querySelectorAll.
Am scris un articol actualizat despre acest lucru: O grămadă de opțiuni pentru Looping Over querySelectorAll NodeLists.
Nu toate browserele acceptă pentru fiecare pe listele de noduri, dar pentru cele care acceptă:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Iată o modalitate dificilă de a obține acest lucru cu un suport de browser mai profund.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Avertisment corect, Todd Motto explică de ce această metodă este destul de ciudată, detaliind peste 10 probleme cu aceasta.
De asemenea, puteți utiliza un clasic pentru buclă:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Sugestia lui Todd este să-ți faci propria metodă:
// 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! ));De asemenea, puteți răspândi singuri lista, ceea ce vă va oferi acces la alte metode de matrice în timp ce vă aflați.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Există și pentru ... de bucle. Firefox a fost primul care a sprijinit acest lucru, dar suportul a devenit destul de bun:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Acest lucru este destul de intens (probabil periculos și nerecomandat), dar ai putea face ca NodeList să aibă aceeași funcție pentru fiecare ca și Array, apoi să o folosești.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Există un pic mai multe informații în articolul MDN.