Mari kita lihat beberapa pilihan untuk melakukan iterasi lebih dari satu NodeListketika anda kembali dari menjalankan a document.querySelectorAll.
Kami telah menulis artikel yang dikemas kini mengenai perkara ini: Sejumlah Pilihan untuk Mengulangi PertanyaanSelectorAll NodeLists.
Tidak semua penyemak imbas menyokong untuk Setiap di NodeLists, tetapi bagi mereka yang melakukan:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Inilah cara yang sukar untuk menyelesaikannya dengan sokongan penyemak imbas yang lebih mendalam.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Amaran yang wajar, Todd Motto menjelaskan mengapa kaedah ini agak sukar, yang memperincikan lebih dari 10 masalah dengannya.
Anda juga boleh menggunakan klasik untuk gelung:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Cadangan Todd adalah membuat kaedah anda sendiri:
// 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! ));Anda juga boleh menyebarkan senarai itu sendiri, yang kemudian akan memberi anda akses kepada kaedah tatasusunan lain semasa anda menggunakannya.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Terdapat juga untuk… gelung. Firefox adalah yang pertama menyokong ini tetapi sokongannya cukup baik:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Ini cukup kuat (mungkin berbahaya dan tidak digalakkan) tetapi anda boleh menjadikan NodeList mempunyai fungsi yang sama untuk Setiap fungsi seperti yang dilakukan oleh Array, kemudian gunakannya.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Terdapat sedikit lebih banyak maklumat dalam artikel MDN.
