JavaScript'te Element Grubu Elde Etme

Önceki derslerde, querySelector metodu kullanarak sayfadan tek bir element elde ettik. Şimdi ise bir element grubu elde etme ve birçok elementle aynı anda işlemler yapma zamanı geldi.

Bunun için, CSS seçiciyle eşleşen tüm etiketleri bir element dizisi olarak alan querySelectorAll metodu bulunmaktadır. Bulunan elementlerle bir şeyler yapmak için, elde edilen diziyle çalışmak gerekir, örneğin, bir döngüyle üzerinden geçip döngü içinde her bir elementle ayrı ayrı bir işlem gerçekleştirmek.

Örneğin, bize www sınıfına sahip paragraflar verilmiş olsun:

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

Hadi bu paragrafların dizisini elde edelim, bir döngüyle üzerlerinden geçelim ve döngü içinde bulunan paragrafların metinlerini konsola yazdıralım:

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

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

Şimdi de her paragrafın metninin sonuna bir ünlem işareti ekleyelim:

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

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

Paragraflar ve bir buton verilmiş. Butona tıklandığında tüm paragrafları bulun, bir döngüyle üzerlerinden geçin ve her bir paragrafın metnini 'text' değerine ayarlayın.

Metinli paragraflar ve bir buton verilmiş. Butona tıklandığında her bir paragrafın metninin sonuna, o paragrafın sıra numarasını yazın.

Sayılar içeren input'lar, bir paragraf ve bir buton verilmiş. Butona tıklandığında input'lardaki sayıların toplamını bulun ve bu toplamı paragrafın metnine yazın.