JavaScript DOM: getElementsByTagName ve getElementsByClassName Kullanımı

eminbasbayan

4 dk okuma

JavaScript DOM: getElementsByTagName ve getElementsByClassName Kullanımı

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

Web sayfalarının yapısını HTML belirler, görünümünü CSS düzenler, ama sayfaya hayat veren şey JavaScript’tir. JavaScript ile bir sayfada gördüğümüz öğeleri seçip değiştirebiliriz. İşte bu makalede, JavaScript kullanarak sayfadaki birden fazla HTML öğesini nasıl seçeceğimizi öğreneceğiz. Özellikle iki temel yöntemi detaylı şekilde inceleyeceğiz:

getElementsByTagName()
getElementsByClassName()

Bu iki yöntem sayesinde, örneğin bir sayfadaki tüm resimleri seçip kaynaklarını değiştirebilir, tüm paragrafları alıp metinlerini yenileyebiliriz. Makalede sıfırdan her şeyi öğreneceğiz. Hadi başlayalım.

1. `getElementsByTagName()` Yöntemi: Etiket Adıyla Eleman Seçmek

Nedir?

Bu yöntem, HTML içindeki belirli bir etiketle oluşturulmuş tüm öğeleri seçmek için kullanılır. Örneğin sayfada birçok <li> (liste öğesi) varsa, hepsini bir kerede bu yöntemle seçebiliriz.

Nasıl Kullanılır?

Şöyle bir HTML olduğunu düşünelim:

<ul>
  <li>Kitap</li>
  <li>Kalem</li>
  <li>Defter</li>
</ul>

Bu listedeki tüm <li> öğelerini seçmek için JavaScript’te şu kodu yazarız:

const tumListeOgeleri = document.getElementsByTagName("li");

Ne Döner?

Bu kod bize bir HTMLCollection döndürür. Yani bir dizi gibi görünen ama aslında dizi olmayan bir koleksiyon verir. Bunda:

Uzunluk bilgisi (.length) vardır
İndeksle erişilebilir: tumListeOgeleri[0], tumListeOgeleri[1] gibi
Döngüyle gezilebilir: for...of döngüsü kullanılabilir
Ama map() ya da forEach() gibi diziye özel metodlar çalışmaz

Uygulama Örneği:

Şimdi bu öğeleri tek tek gezip her birini konsola yazdıralım:

for (let oge of tumListeOgeleri) {
  console.log(oge.textContent);
}

Bu kod, HTML'deki tüm liste öğelerinin içindeki metni tek tek yazdırır:

Kitap

Kalem

Defter

Manipülasyon (Değiştirme) Örneği:

Aynı öğeleri seçip içeriklerini değiştirmek de mümkündür:

for (let oge of tumListeOgeleri) {
  oge.textContent = "Güncellendi";
}

Bu kod çalıştırıldığında, artık tüm <li> öğelerinde sadece "Güncellendi" yazacaktır.

2. `getElementsByClassName()` Yöntemi: Sınıf Adıyla Eleman Seçmek

Nedir?

Bu yöntem, HTML içinde aynı class adına sahip öğeleri topluca seçmek için kullanılır. HTML'de class özelliği, genelde aynı türde veya aynı tarzda öğeleri gruplamak için kullanılır.

Örnek HTML:

<div class="renkli">Kırmızı</div>
<div class="renkli">Mavi</div>
<div class="renkli">Yeşil</div>

JavaScript ile Seçim:

Bu üç div öğesi de renkli sınıfına sahip. Hepsini birden seçmek için şunu yazarız:

const renkliKutular = document.getElementsByClassName("renkli");

Bu da yine bize bir HTMLCollection döndürür.

Döngüyle Gezme:

for (let kutu of renkliKutular) {
  console.log(kutu.textContent);
}

Bu kod çıktısı:

Kırmızı

Mavi

Yeşil

Stil Değiştirme Örneği:

Şimdi bu kutuların arka plan rengini değiştirelim:

for (let kutu of renkliKutular) {
  kutu.style.backgroundColor = "lightgray";
}

Böylece renkli sınıfına sahip tüm öğeler, artık açık gri arka plana sahip olur.

HTMLCollection Nedir? Neden Dizi Değil?

Her iki yöntemin (getElementsByTagName ve getElementsByClassName) döndürdüğü şey HTMLCollection denilen özel bir listedir.

Bu liste:

Uzunluk bilgisi verir: .length
Sıralı elemanları içerir: [0], [1], [2]
for...of ile döngüye sokulabilir

Ama bir dizi (Array) değildir. Yani aşağıdaki gibi bir şey çalışmaz:

renkliKutular.map(kutu => kutu.textContent); // Hata verir

Bunun yerine, gerekirse HTMLCollection’ı diziye çevirebiliriz:

const diziHalineGetir = Array.from(renkliKutular);

Eğer Eleman Bulunamazsa Ne Olur?

Eğer aradığın etiket ya da sınıf sayfada hiç yoksa:

JavaScript hata vermez
Sana boş bir HTMLCollection döndürür
Yani .length sıfır olur

Örnek:

const olmayanlar = document.getElementsByClassName("ucanBalina");
console.log(olmayanlar.length); // 0

Bu güvenli bir davranıştır. Kodun çalışmaya devam eder, sadece işlem yapılacak öğe olmaz.

`getElementById` ile Farkı Nedir?

Önceki derslerde kullanılan getElementById, yalnızca bir tek öğeyi döndürür. ID'ler sayfada benzersiz olmalıdır.

Ama burada gördüğümüz iki yöntem, birden fazla öğeyi döndürebilir. Bu yüzden getElements ile başlarlar.

Sonuç

Bu makalede, JavaScript kullanarak bir sayfadaki HTML öğelerini etiket ya da sınıf adına göre seçmenin temel yollarını öğrendin:

getElementsByTagName() ile bir türden tüm öğeleri seçebilirsin
getElementsByClassName() ile aynı sınıfa sahip öğeleri topluca işleyebilirsin
Her iki yöntem de bir HTMLCollection döndürür: diziyi andıran ama tam olarak dizi olmayan bir yapıdır
Bu yöntemlerle öğeleri okuyabilir, üzerlerinde döngü kurabilir ve görünümlerini ya da içeriklerini değiştirebilirsin