JavaScript DOM: getElementsByTagName ve getElementsByClassName Kullanımı

Önceki makalede getElementById ile tek bir elementi ID'sine göre seçmeyi öğrendik. Peki ya sayfadaki tüm paragrafları veya belirli bir class'a sahip tüm elementleri seçmek istersek?

İşte getElementsByTagName ve getElementsByClassName tam da bu iş için! Bu metodlar birden fazla elementi aynı anda seçmemizi sağlar.

getElementsByTagName

Sayfadaki belirli bir HTML etiketine sahip tüm elementleri seçer.

Sözdizimi

javascript

document.getElementsByTagName("etiket-adi")

Örnekler

javascript

// Tüm paragrafları seç
const paragraflar = document.getElementsByTagName("p");

// Tüm resimleri seç
const resimler = document.getElementsByTagName("img");

// Tüm linkleri seç
const linkler = document.getElementsByTagName("a");

// Tüm başlıkları seç
const basliklar = document.getElementsByTagName("h1");

// Tüm liste öğelerini seç
const maddeler = document.getElementsByTagName("li");

Pratik Örnek

html

<ul>
    <li>Elma</li>
    <li>Armut</li>
    <li>Muz</li>
</ul>

javascript

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

console.log(tumMaddeler);        // HTMLCollection(3) [li, li, li]
console.log(tumMaddeler.length); // 3
console.log(tumMaddeler[0]);     // <li>Elma</li>
console.log(tumMaddeler[1]);     // <li>Armut</li>
console.log(tumMaddeler[2]);     // <li>Muz</li>

getElementsByClassName

Sayfadaki belirli bir class'a sahip tüm elementleri seçer.

Sözdizimi

javascript

document.getElementsByClassName("class-adi")

Dikkat: Class adını yazarken başına nokta (.) koymayın!

javascript

// ❌ Yanlış
document.getElementsByClassName(".onemli");

// ✅ Doğru
document.getElementsByClassName("onemli");

Pratik Örnek

html

<p class="mesaj">Birinci mesaj</p>
<p class="mesaj">İkinci mesaj</p>
<p class="uyari">Bu bir uyarı</p>
<p class="mesaj">Üçüncü mesaj</p>

javascript

const mesajlar = document.getElementsByClassName("mesaj");

console.log(mesajlar);        // HTMLCollection(3) [p.mesaj, p.mesaj, p.mesaj]
console.log(mesajlar.length); // 3

const uyarilar = document.getElementsByClassName("uyari");
console.log(uyarilar.length); // 1

HTMLCollection Nedir?

Her iki metod da HTMLCollection adında bir yapı döndürür. Bu yapı diziye benzer ama dizi değildir!

HTMLCollection Özellikleri

javascript

const kutular = document.getElementsByClassName("kutu");

// ✅ Kullanılabilir
kutular.length;      // Eleman sayısı
kutular[0];          // İndeks ile erişim
kutular[1];          // İndeks ile erişim

// ❌ Kullanılamaz (dizi metotları)
kutular.map();       // TypeError!
kutular.filter();    // TypeError!
kutular.forEach();   // TypeError!
kutular.push();      // TypeError!

Dizi ile HTMLCollection Karşılaştırması

Özellik	Array	HTMLCollection
`length`	✅	✅
İndeks erişimi `[0]`	✅	✅
`for...of` döngüsü	✅	✅
`forEach()`	✅	❌
`map()`	✅	❌
`filter()`	✅	❌
`push()`, `pop()`	✅	❌

HTMLCollection Üzerinde Döngü

Yöntem 1: for...of (Önerilen)

javascript

const resimler = document.getElementsByTagName("img");

for (const resim of resimler) {
    console.log(resim.src);
}

Yöntem 2: Klasik for Döngüsü

javascript

const resimler = document.getElementsByTagName("img");

for (let i = 0; i < resimler.length; i++) {
    console.log(resimler[i].src);
}

Yöntem 3: Array'e Çevirip Döngü

javascript

const resimler = document.getElementsByTagName("img");

// Array.from() ile diziye çevir
const resimDizisi = Array.from(resimler);

// Artık dizi metotlarını kullanabilirsin
resimDizisi.forEach(resim => {
    console.log(resim.src);
});

// veya map
const kaynaklar = resimDizisi.map(resim => resim.src);

Yöntem 4: Spread Operatörü

javascript

const resimler = document.getElementsByTagName("img");

// Spread ile diziye çevir
[...resimler].forEach(resim => {
    console.log(resim.src);
});

Pratik Örnekler

Örnek 1: Tüm Resimlere Kenarlık Ekle

html

<img src="resim1.jpg" alt="Resim 1">
<img src="resim2.jpg" alt="Resim 2">
<img src="resim3.jpg" alt="Resim 3">

javascript

const resimler = document.getElementsByTagName("img");

for (const resim of resimler) {
    resim.style.border = "3px solid red";
    resim.style.borderRadius = "10px";
}

Örnek 2: Belirli Class'taki Elementleri Gizle

html

<div class="reklam">Reklam 1</div>
<p>Normal içerik</p>
<div class="reklam">Reklam 2</div>
<p>Başka içerik</p>
<div class="reklam">Reklam 3</div>

javascript

const reklamlar = document.getElementsByClassName("reklam");

for (const reklam of reklamlar) {
    reklam.style.display = "none";
}

// Artık sayfada reklamlar görünmez!

Örnek 3: Tüm Linklerin Rengini Değiştir

javascript

const linkler = document.getElementsByTagName("a");

for (const link of linkler) {
    link.style.color = "purple";
    link.style.textDecoration = "none";
}

Örnek 4: Liste Öğelerini Numaralandır

html

<ul id="gorevler">
    <li>Alışveriş yap</li>
    <li>Fatura öde</li>
    <li>Spor yap</li>
</ul>

javascript

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

let sayac = 1;
for (const gorev of gorevler) {
    gorev.innerText = `${sayac}. ${gorev.innerText}`;
    sayac++;
}

// Sonuç:
// 1. Alışveriş yap
// 2. Fatura öde
// 3. Spor yap

Örnek 5: Çift/Tek Satır Renklendirme

html

<table>
    <tr><td>Satır 1</td></tr>
    <tr><td>Satır 2</td></tr>
    <tr><td>Satır 3</td></tr>
    <tr><td>Satır 4</td></tr>
</table>

javascript

const satirlar = document.getElementsByTagName("tr");

for (let i = 0; i < satirlar.length; i++) {
    if (i % 2 === 0) {
        satirlar[i].style.backgroundColor = "#f2f2f2";
    } else {
        satirlar[i].style.backgroundColor = "#ffffff";
    }
}

Örnek 6: Hepsinin Değerini Toplama

html

<input type="number" class="fiyat" value="100">
<input type="number" class="fiyat" value="250">
<input type="number" class="fiyat" value="75">
<p id="toplam"></p>

javascript

const fiyatlar = document.getElementsByClassName("fiyat");
let toplam = 0;

for (const fiyat of fiyatlar) {
    toplam += Number(fiyat.value);
}

document.getElementById("toplam").innerText = `Toplam: ${toplam} TL`;
// Toplam: 425 TL

Element Bulunamazsa

getElementById'den farklı olarak, bu metodlar element bulamazsa null değil, boş HTMLCollection döndürür:

javascript

// getElementById - null döner
const yok = document.getElementById("olmayan");
console.log(yok);  // null

// getElementsByTagName - boş collection döner
const yokTag = document.getElementsByTagName("xyz");
console.log(yokTag);         // HTMLCollection []
console.log(yokTag.length);  // 0

// getElementsByClassName - boş collection döner
const yokClass = document.getElementsByClassName("olmayan");
console.log(yokClass);       // HTMLCollection []
console.log(yokClass.length); // 0

Kontrol Yapma

javascript

const kutular = document.getElementsByClassName("kutu");

if (kutular.length > 0) {
    // Elementler bulundu, işlem yap
    for (const kutu of kutular) {
        kutu.style.backgroundColor = "yellow";
    }
} else {
    console.log("Hiç kutu bulunamadı!");
}

Belirli Element İçinde Arama

Bu metodları sadece document üzerinde değil, herhangi bir element üzerinde de kullanabilirsiniz:

html

<div id="menu">
    <a href="#">Ana Sayfa</a>
    <a href="#">Hakkımızda</a>
    <a href="#">İletişim</a>
</div>

<div id="footer">
    <a href="#">Gizlilik</a>
    <a href="#">Kullanım Şartları</a>
</div>

javascript

// Sadece menu içindeki linkleri seç
const menu = document.getElementById("menu");
const menuLinkleri = menu.getElementsByTagName("a");
console.log(menuLinkleri.length);  // 3

// Sadece footer içindeki linkleri seç
const footer = document.getElementById("footer");
const footerLinkleri = footer.getElementsByTagName("a");
console.log(footerLinkleri.length);  // 2

Canlı (Live) Collection

HTMLCollection canlıdır - DOM değişirse collection da otomatik güncellenir:

javascript

const paragraflar = document.getElementsByTagName("p");
console.log(paragraflar.length);  // 2

// Yeni paragraf ekle
const yeniP = document.createElement("p");
yeniP.innerText = "Yeni paragraf";
document.body.appendChild(yeniP);

// Collection otomatik güncellendi!
console.log(paragraflar.length);  // 3

Not: Bu davranış bazen beklenmedik sonuçlara yol açabilir. Dikkatli olun!

Özet Tablosu

Metod	Seçim Kriteri	Dönen Değer	Bulunamazsa
`getElementById`	ID	Tek Element	`null`
`getElementsByTagName`	Etiket adı	HTMLCollection	Boş Collection
`getElementsByClassName`	Class adı	HTMLCollection	Boş Collection

Özet

javascript

// Tag adına göre seç
const paragraflar = document.getElementsByTagName("p");
const resimler = document.getElementsByTagName("img");

// Class adına göre seç (nokta yok!)
const kutular = document.getElementsByClassName("kutu");
const aktifler = document.getElementsByClassName("aktif");

// Döngü ile işlem yap
for (const element of collection) {
    // element ile bir şeyler yap
}

// Diziye çevir (dizi metotları için)
const dizi = Array.from(collection);
const dizi2 = [...collection];

Sırada Ne Var?

getElementsByTagName ve getElementsByClassName işe yarıyor ama biraz eski usul. Daha modern ve güçlü bir yöntem var!

Bir sonraki makalede querySelector ve querySelectorAll metodlarını öğreneceğiz - CSS seçicileri kullanarak element seçmenin modern yolu.

JavaScript DOM: getElementsByTagName ve getElementsByClassName Kullanımı

getElementsByTagName

Sözdizimi

Örnekler

Pratik Örnek

getElementsByClassName

Sözdizimi

Pratik Örnek

HTMLCollection Nedir?

HTMLCollection Özellikleri

Dizi ile HTMLCollection Karşılaştırması

HTMLCollection Üzerinde Döngü

Yöntem 1: for...of (Önerilen)

Yöntem 2: Klasik for Döngüsü

Yöntem 3: Array'e Çevirip Döngü

Yöntem 4: Spread Operatörü

Pratik Örnekler

Örnek 1: Tüm Resimlere Kenarlık Ekle

Örnek 2: Belirli Class'taki Elementleri Gizle

Örnek 3: Tüm Linklerin Rengini Değiştir

Örnek 4: Liste Öğelerini Numaralandır

Örnek 5: Çift/Tek Satır Renklendirme

Örnek 6: Hepsinin Değerini Toplama

Element Bulunamazsa

Kontrol Yapma

Belirli Element İçinde Arama

Canlı (Live) Collection

Özet Tablosu

Özet

Sırada Ne Var?

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword

getElementsByTagName

Sözdizimi

Örnekler

Pratik Örnek

getElementsByClassName

Sözdizimi

Pratik Örnek

HTMLCollection Nedir?

HTMLCollection Özellikleri

Dizi ile HTMLCollection Karşılaştırması

HTMLCollection Üzerinde Döngü

Yöntem 1: for...of (Önerilen)

Yöntem 2: Klasik for Döngüsü

Yöntem 3: Array'e Çevirip Döngü

Yöntem 4: Spread Operatörü

Pratik Örnekler

Örnek 1: Tüm Resimlere Kenarlık Ekle

Örnek 2: Belirli Class'taki Elementleri Gizle

Örnek 3: Tüm Linklerin Rengini Değiştir

Örnek 4: Liste Öğelerini Numaralandır

Örnek 5: Çift/Tek Satır Renklendirme

Örnek 6: Hepsinin Değerini Toplama

Element Bulunamazsa

Kontrol Yapma

Belirli Element İçinde Arama

Canlı (Live) Collection

Özet Tablosu

Özet

Sırada Ne Var?

İlgili yazılar

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword