getElementsByClassName

Coddy'nin JavaScript DOM Metotları kursunda ders 5 / 13.

getElementsByClassName() fonksiyonu, eşleşen bir sınıf özniteliğine (class attribute) sahip tüm öğelerden oluşan bir dizi döndürür; bu, aynı stili veya davranışı paylaşan birden fazla öğeyi seçmek için kullanışlıdır. Örneğin:

const elements = document.getElementsByClassName("className");

Yukarıdaki kod, className sınıfına sahip öğeleri alır ve bunları elements adlı bir değişkene kaydeder.

Tüm benzer öğelerin özelliklerini değiştirmek için bu değişken üzerinde döngü kurmamız gerekir, örneğin:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}

Görev

Kolay

Size highlight sınıf adına sahip paragraflar içeren bir HTML kodu verilmiştir.

Sadece JavaScript kullanarak, metnin rengini ve yazı tipi kalınlığını değiştirin:

getElementsByClassName() fonksiyonunu kullanarak öğeleri alın.
Bir for döngüsü kullanarak bu alınan öğe değişkeni üzerinde gezinin.
Dizideki her öğe için style özelliğini kullanarak color değerini “orange” ve fontWeight değerini “bold” olarak değiştirin.

Değişiklikleri görmek için web sayfasını yenilemeniz gerekecektir:

Kendin dene

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM Metotları bölümündeki tüm dersler

1Giriş

Giriş Document Object Model

2DOM Metotları I

getElementById Eleman Stilini DeğiştirmegetElementsByClassNameDöngü ile Gezinme ve Düzenleme getElementsByTagName querySelector

3DOM Metotları II

querySelectorAll addEventListener innerHTML createElement ve appendChild classList toggle