HTML DOM Element getElementsByClassName() yöntemi

Tanım ve Kullanım

getElementsByClassName() Yöntem, belirtilen sınıf adına sahip alt elemanların koleksiyonunu NodeList nesnesi olarak döndürür.

Ayrıca bakınız:

classList özelliği

className özelliği

querySelector() yöntemi

querySelectorAll() yöntemi

getElementsByTagName() yöntemi

HTML DOM Style Nesnesi

Tutorial:

CSS grameri

CSS seçicileri

CSS seçici referans kitabı

NodeList

NodeList Dizilere benzer düğüm koleksiyonu (liste)dır.

Listedeki düğümlere indeks (dizgi) ile erişebilirsiniz. İndeks 0'dan başlar.

length özelliğiListedeki düğüm sayısını döndürür.

Örnek

Örnek 1

class="child" ile ilk liste elemanının metnini değiştirin:

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Kişisel olarak deneyin

Örnek 2

"myDIV" içinde class="child" olan eleman sayısı:

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Kişisel olarak deneyin

Örnek 3

class="child" ikonunun ikinci elemanının boyutunu değiştirin:

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Kişisel olarak deneyin

Örnek 4

class="example" olan ikinci elemanda "child" ve "color" sınıfları ile ilk elemanın boyutunu değiştir:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Kişisel olarak deneyin

Örnek 5

class="child" olan "myDIV" içindeki tüm elemanların rengini değiştir:

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Kişisel olarak deneyin

Sözdizimi

element.getElementsByClassName(classname)

Parametre

Parametre Açıklama
classname

Gerekli. Alt elemanın sınıf adı.

Birden fazla adı boşlukla ayırın (örneğin "child color").

Dönüş değeri

Tür Açıklama
NodeList

Belirtilen sınıf adına sahip elemanların alt elemanları içerir.

Elemanlar kaynak kodunda ortaya çıktıkları sırayla sıralanır.

Tarayıcı Desteği

element.getElementsByClassName() DOM Level 1 (1998) özelliğidir.

Tüm tarayıcılar tamamen destekler:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek 9-11 Destek Destek Destek Destek