A'yı NodeListçalıştırmadan dönerken, a üzerinde yineleme yapmak için bazı seçeneklere bakalım document.querySelectorAll.
Bununla ilgili güncellenmiş bir makale yazdık: querySelectorAll NodeLists üzerinden Döngü için Seçenekler.
Tüm tarayıcılar Düğüm Listelerinde Her Biri desteklemez, ancak aşağıdakileri yapanları destekler:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));İşte biraz daha derin bir tarayıcı desteğiyle bunu aşmanın zor bir yolu.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Adil bir uyarı, Todd Motto, bu yöntemin neden oldukça karmaşık olduğunu açıklıyor ve onunla ilgili 10'dan fazla sorunu detaylandırıyor.
Ayrıca klasik bir for döngüsü de kullanabilirsiniz:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Todd'un önerisi, kendi yönteminizi yapmanızdır:
// 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! ));Listeyi kendiniz de yayabilirsiniz, bu da daha sonra diğer dizi yöntemlerine erişmenizi sağlar.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Ayrıca ... arasında döngü vardır. Firefox bunu destekleyen ilk kişi oldu, ancak destek oldukça iyi hale geldi:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Bu oldukça yoğundur (muhtemelen tehlikelidir ve tavsiye edilmez), ancak NodeList'in Array'in yaptığı forEach işleviyle aynı olmasını sağlayıp sonra kullanabilirsiniz.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))MDN makalesinde biraz daha fazla bilgi var.