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:

<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:

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

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

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

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

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

Diberikan paragraf dan tombol. Saat tombol ditekan, temukan semua paragraf, ulangi dengan loop dan atur teks setiap paragraf ke nilai 'text'.

Diberikan paragraf dengan teks dan tombol. Saat tombol ditekan, tulis di akhir teks setiap paragraf nomor urutnya.

Diberikan input dengan angka, paragraf, dan tombol. Saat tombol ditekan, temukan jumlah angka dari input dan tulis jumlah ini ke dalam teks paragraf.