Ulangi querySelectorAll Matches - Trik CSS

Mari kita lihat beberapa opsi untuk mengulangi a NodeList, saat Anda kembali menjalankan file document.querySelectorAll.

Kami telah menulis artikel yang diperbarui tentang ini: Sekelompok Opsi untuk Pendauran Atas querySelectorAll NodeLists.

Tidak semua browser mendukung forEach di NodeLists, tetapi browser yang mendukung:

buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));

Berikut cara rumit untuk mengatasinya dengan dukungan browser yang sedikit lebih dalam.

var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));

Peringatan yang adil, Todd Motto menjelaskan mengapa metode ini agak hacky, merinci lebih dari 10 masalah dengannya.

Anda juga bisa menggunakan for loop klasik:

var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )

Saran Todd adalah membuat metode 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 dapat menyebarkan daftar sendiri, yang kemudian akan memberi Anda akses ke metode array lain saat Anda melakukannya.

(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));

Ada juga untuk… loop. Firefox adalah yang pertama mendukung ini tetapi dukungannya sudah cukup baik:

for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )

Ini cukup intens (mungkin berbahaya dan tidak disarankan) tetapi Anda dapat membuat NodeList memiliki fungsi forEach yang sama seperti Array, lalu gunakan.

NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))

Ada sedikit lebih banyak informasi di artikel MDN.