Javascript’te Element Seçicileri

Javascript’te element seçmek jquery kütüphanesi ile çok kolay bir şekilde yapılıyor. Fakat bazen jquery kullanmak istemediğimiz durumlar veya projeler olabilir. Bu gibi durumlarda temel javascript bilgisi ile elementlere nasıl erişebiliriz bunu görelim.

querySelector() ve querySelectorAll()

Bu methodlar ile tıpkı Jquery’ deki gibi elementlere erişmemizi sağlıyor. Bunu yaparken id, class veya etiket bazlı seçimler yapılabiliyor. Fakat biraz daha uğraştırıcı.

querySelector() tek bir elemente ulaşmak için bunu kullanabilirsiniz.

<div class="container">
  <p>Bu bir paragraftır ve <span>bu spandır</span></p>
</div>
var element = document.querySelector('.container > p > span');
element.style.color = "red";

Çalışan örneği görün

querySelectorAll() birden fazla elemente erişmek için kullanabilirsiniz.

<div class="container">
   <p>Bu bir paragraftır.</p>
   <p>Bu bir paragraftır.</p>
   <p>Bu bir paragraftır.</p>
</div>
var element = document.querySelectorAll('.container p');
for(var i=0; i<element.length; i++){
   element[i].style.color = "red";
}

Çalışan örneği görün

getElementById()

getElementById() ile elementleri ID değerine göre seçip işlem yapabilirsiniz.

<div class="container">
   <div id="box"></div>
</div>
var element = document.getElementById('box');
element.style.height = "100px";
element.style.width = "100px";
element.style.backgroundColor = "red";

Çalışan örneği görün

getElementsByClassName()

getElementsByClassName() ile elementleri sınıf değerine göre seçebilirsiniz. Bunun kullanımı ilk maddede yaptığımla aynı mantıkta 🙂

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
var element = document.getElementsByClassName('box');
for(var i=0; i<element.length; i++){
   element[i].style.height = "100px";
   element[i].style.width = "100px";
   element[i].style.marginBottom = "10px";
   element[i].style.background = "red";
}

Çalışan örneği görün

getElementsByTagName()

getElementsByTagName() ile elementleri etiket adına göre seçebilirsiniz. Örneğin sadece DIV ‘leri ve SPAN etiketlerini seçmek gibi.

<div class="box">Bu bir divdir. <span>Bu bir spandır</span></div>
<div class="box">Bu bir divdir. <span>Bu bir spandır</span></div>
<div class="box">Bu bir divdir. <span>Bu bir spandır</span></div>
var element = document.getElementsByTagName('SPAN');
for(var i=0; i<element.length; i++){
   element[i].style.color = "crimson";
}

Çalışan örneği görün

Sonuç

querySelectorAll(), getElementsByClassName(), getElementsByTagName() gibi “s” takısı almış veya “All” ibaresi eklenmiş olan seçiciler dizi olarak çıktı verir. Bu durumda tek tek indisleri ile birlikte veya döngü ile yazdırmak gerekir.

Aslında birkaç seçici daha var ama bu kadarını bilmek bile işimizi fazlasıyla görür. Eğer gerekirse diğer methodlarıda konunun devamına ekleyebilirim.

Şimdilik görüşmek üzere 🙂

Yayınlayan

Uğur Özgen

2012 yılından beri web tasarım ile ilgileniyorum. Son 3 senedir profesyonel anlamda bu işi yapıyorum. İşimi çok seviyorum ve her zaman güncel kalmaya çalışıyorum.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir