GetElementsByClassName() yöntemi, öğeleri sınıf adı değerleri aracılığıyla seçmek veya almak için kullanılır. Bu DOM yöntemi, belirtilen sınıf adına sahip tüm öğelerden oluşan dizi benzeri bir nesne döndürür. Belirli bir öğe üzerinde getElementsByClassName() yöntemi çağrıldığında, tüm belgeyi arayacak ve yalnızca belirtilen veya verilen sınıf adıyla eşleşen öğeleri döndürecektir.
Sözdizimi
var ele=document.getELementsByClassName('name');
Burada name, iletilmesi gereken zorunlu argümandır. Eşleşecek tek bir sınıf adını veya birden fazla sınıf adını belirten dizedir.
getElementsByClassName() Yöntemi Örneği
Yöntemin pratik uygulamasını bilmek ve anlamak için bazı örneklere bakalım.
Örnek
Bu, x değişkeni çağrıldığında dizi benzeri bir nesne döndüren basit bir sınıf uygulamasıdır.
<h5>DOM Methods </h5> This is a simple class implementation var x=document.getElementsByClassName('Class'); document.write('On calling x, it will return an arrsy-like object: <br>'+x);
Çıktı:
Benzer şekilde, birden fazla sınıfa ait öğe koleksiyonlarını döndürmek için getElementsByClassName() yöntemini uygulayabiliriz.
getElementsByClassName(), querySelector() ve querySelectorAll() Yöntemleri arasındaki fark
getElementsByClassName(): Öğeleri belirtilen sınıf adıyla eşleştirir ve eşleşen öğelerin bir kümesini döndürür. Döndürülen öğeler, öğelerin canlı HTML koleksiyonudur. Belge Nesne Modelinde herhangi bir değişiklik yapılması durumunda bu canlı öğeler daha da güncellenebilir.
querySelector(): Yalnızca belirtilen sınıf adıyla eşleşen tek bir öğeyi döndürür. Eşleşen bir öğe bulamazsa null değerini döndürür.
Anlaşılması gereken ana nokta, yukarıda açıklanan tüm yöntemlerin ya bir öğe ya da bir liste döndürdüğü, ancak getELementsByClassName() yönteminin dinamik güncelleme, diğer iki yöntem ise statik .