Mendapatkan Kumpulan Elemen dalam JavaScript

Dalam pelajaran sebelumnya, kita menggunakan kaedah querySelector untuk mendapatkan satu elemen halaman. Sekarang tiba masanya untuk belajar mendapatkan kumpulan elemen dan melakukan beberapa operasi sekali gus dengan banyak elemen.

Untuk ini, terdapat kaedah querySelectorAll, yang mendapatkan semua tag yang sesuai dengan pemilih CSS, dalam bentuk tatasusunan elemen. Untuk melakukan sesuatu dengan elemen yang ditemui, perlu bekerja dengan tatasusunan yang diperoleh, contohnya, mengulanginya dengan gelung dan dalam gelung melaksanakan beberapa operasi dengan setiap elemen secara berasingan.

Katakan, sebagai contoh, kita mempunyai perenggan dengan kelas www:

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

Mari dapatkan tatasusunan perenggan ini, ulangi mereka dengan gelung dan dalam gelung outputkan teks perenggan yang ditemui ke konsol:

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

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

Sekarang mari tambahkan tanda seru pada akhir teks setiap perenggan:

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

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

Diberikan perenggan dan butang. Apabila butang ditekan, cari semua perenggan, ulangi mereka dengan gelung dan tetapkan teks setiap perenggan kepada nilai 'text'.

Diberikan perenggan dengan teks dan butang. Apabila butang ditekan, tulis pada akhir teks setiap perenggan nombor urutannya.

Diberikan input dengan nombor, perenggan dan butang. Apabila butang ditekan, cari jumlah nombor dari input dan tulis jumlah ini dalam teks perenggan.