HTML DOM getElementsByClassName() Yöntemi
❮ Öğe NesnesiÖrnek
class="example" içeren bir listede class="child" (index 0) ile ilk liste öğesinin metnini değiştirin:
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
getElementsByClassName() yöntemi, belirtilen sınıf adına sahip bir öğenin alt öğelerinin bir koleksiyonunu bir NodeList nesnesi olarak döndürür.
NodeList nesnesi, bir düğüm koleksiyonunu temsil eder. Düğümlere indeks numaraları ile erişilebilir. Endeks 0'dan başlar.
İpucu: Belirtilen sınıf adına sahip alt düğümlerin sayısını belirlemek için NodeList nesnesinin length özelliğini kullanabilir , ardından tüm düğümler arasında döngü yapabilir ve istediğiniz bilgiyi çıkarabilirsiniz.
Tarayıcı Desteği
Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Method | |||||
---|---|---|---|---|---|
getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Sözdizimi
element.getElementsByClassName(classname)
Parametre Değerleri
Parameter | Type | Description |
---|---|---|
classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
Teknik detaylar
DOM Sürümü: | Çekirdek Düzey 1 Öğe Nesnesi |
---|---|
Geri dönüş değeri: | Belirtilen sınıf adına sahip öğelerin alt öğelerinin bir koleksiyonunu temsil eden bir NodeList nesnesi. Döndürülen koleksiyondaki öğeler, kaynak kodunda göründükleri gibi sıralanır. |
Daha fazla örnek
Örnek
Bir <div> öğesinin içinde class="child" olan ikinci öğenin arka plan rengini değiştirin:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
Örnek
Bir <div> öğesinin içinde class="child" olan kaç öğe olduğunu öğrenin (NodeList nesnesinin length özelliğini kullanarak):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
Örnek
İlk öğenin arka plan rengini, class="example" olan bir öğenin içindeki hem "child" hem de "color" sınıfıyla değiştirin:
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
Örnek
Bir <div> öğesinin içinde class="child" olan tüm öğelerin arka plan rengini değiştirin:
var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
İlgili Sayfalar
CSS Eğitimi: CSS Sözdizimi
CSS Referansı: CSS .class Seçici
HTML DOM Referansı: document.getElementsByClassName()
HTML DOM Referansı: className Özellik
HTML DOM Referansı: classList Özelliği
HTML DOM Referansı: HTML DOM Stil Nesnesi
❮ Öğe Nesnesi