Pažvelkime į keletą iteravimo per „a“ variantų NodeList, kai grįšite paleidę a document.querySelectorAll.
Mes parašėme atnaujintą straipsnį apie tai: krūva parinkčių, kaip perjungti „querySelectorAll NodeLists“.
Ne visos naršyklės palaiko forEach NodeLists, bet tiems, kurie palaiko:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Čia yra keblus būdas tai apeiti naudojant šiek tiek gilesnį naršyklės palaikymą.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Teisingas įspėjimas Toddas Motto paaiškina, kodėl šis metodas yra gana nulaužtas, ir paaiškina daugiau nei 10 su juo susijusių problemų.
Taip pat galite naudoti klasikinę kilpą:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Toddo pasiūlymas yra sukurti savo 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! ));Taip pat galite patys paskleisti sąrašą, kuris suteiktų jums prieigą prie kitų masyvo metodų, kai jūs jį naudojate.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Taip pat yra ... kilpų. „Firefox“ pirmas tai palaikė, tačiau palaikymas tapo gana geras:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Tai yra gana intensyvu (tikriausiai pavojinga ir nerekomenduojama), bet jūs galite priversti „NodeList“ turėti tą pačią funkciją, kaip ir „Array“, tada ją naudoti.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))MDN straipsnyje yra šiek tiek daugiau informacijos.