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:
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ı:
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çebilirsingetElementsByClassName() 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