Pozrime sa na niekoľko možností iterácie cez a NodeList, keď sa vrátite z chodu a document.querySelectorAll.
Napísali sme o tom aktualizovaný článok: Mnoho možností pre opakovanie sa v zozname querySelectorAll NodeLists.
Nie všetky prehľadávače podporujú každý v NodeLists, ale v tých, ktoré ho podporujú:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Toto je zložitý spôsob, ako to obísť, s trochu hlbšou podporou prehľadávača.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Spravodlivé varovanie, Todd Motto vysvetľuje, prečo je táto metóda dosť hackerská, a podrobne popisuje viac ako 10 problémov.
Môžete tiež použiť klasický cyklus for:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Todd navrhuje, aby ste si vytvorili vlastnú metódu:
// 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! ));Zoznam môžete tiež rozšíriť sami, čo vám umožní prístup k ďalším metódam poľa, keď už ste pri tom.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Existujú aj ... slučky. Ako prvý to podporoval Firefox, ale podpora sa dosť zlepšila:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Toto je dosť intenzívne (pravdepodobne nebezpečné a neodporúčané), ale môžete vytvoriť, aby mal NodeList rovnakú funkciu pre každú funkciu ako Array, potom ju použite.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))V článku MDN je o niečo viac informácií.