Mendapatkan Grup Elemen dalam JavaScript

Dalam pelajaran sebelumnya, kita menggunakan metode querySelector untuk mendapatkan satu elemen halaman. Sekarang saatnya belajar untuk mendapatkan sekelompok elemen dan melakukan beberapa operasi sekaligus pada banyak elemen.

Untuk ini, ada metode querySelectorAll, yang mendapatkan semua tag yang cocok dengan selektor CSS, dalam bentuk array elemen. Untuk melakukan sesuatu dengan elemen yang ditemukan, Anda perlu bekerja dengan array yang diperoleh, misalnya, mengulanginya dengan loop dan dalam loop tersebut melakukan beberapa operasi pada setiap elemen secara individual.

Misalnya, kita memiliki paragraf dengan kelas www:

html<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

Mari kita dapatkan array dari paragraf-paragraf ini, ulangi mereka dengan loop dan dalam loop tampilkan teks paragraf yang ditemukan di konsol:

javascriptlet elems = document.querySelectorAll('.www');

for (let elem of elems) {
  console.log(elem.textContent);
}

Dan sekarang mari tambahkan tanda seru pada akhir teks setiap paragraf:

javascriptlet elems = document.querySelectorAll('.www');

for (let elem of elems) {
  elem.textContent = elem.textContent + '!';
}