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:

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

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

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

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