Javascript getElementsByClassName kullanımı

Sezai AlkanFrontend Developer

JavaScript #javascript #js #class

Javascript getElementsByClassName kullanımında, Html elemanları içerisinde class property sine sahip elemanları seçmemize, yakalamamıza imkan sağlamaktadır.

Kullanımı : document.getElementsByClassName()

getElementsByClassName merhodu ile yakaladığımız elemanların değerlerini elde edebilir veya istediğimiz değeri ekleyebilir, güncelleyebiliriz.

<p class="simple"> Hello World </p>

var e = document.getElementsByClassName("simple");
console.log(e[0].innerHTML);

Yukarıdaki örnekte p elemanının değerini console yazdıralım. Console ekran çıktı aşağıdaki gibidir.

Class işlemlerinde id değeri gibi tek bir değer yerine sayfa içerisinde aynı class değerine sahip tüm elemanları seçmektedir. Bu nedenle getElementsByClassName methodu bizlere list olarak geri dönmektedir.

var e = document.getElementsByClassName("simple");
console.log(e);

Yukarıdaki örneğin console ekran çıktısı aşağıdaki gibidir.

ulaşmak istediğimiz html elemanına indis numarası ile elemana ait değerleri elde edebilmekteyiz.