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.

<p>Bu bir paragraftır ve bu spandır</p>
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.

<p>Bu bir paragraftır</p>
<p>Bu bir paragraftır</p>
<p>Bu bir paragraftır</p>
var element = document.querySelectorAll('.container p');
for(var i=0; i

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

getElementById()

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


 

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 :)


 
 
 

var element = document.getElementsByClassName('box');
for(var i=0; i

Ç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.


Bu bir divdir. Bu bir spandır
Bu bir divdir. Bu bir spandır
Bu bir divdir. Bu bir spandır

var element = document.getElementsByTagName('SPAN');
for(var i=0; i

Ç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 :)

Yorum Bırak

Yorum gönderirken kullanabileceğiniz BBKOD listesi için tıklayın

  • [b] ... [/b]
  • [i] ... [/i]
  • [u] ... [/u]
  • [s] ... [/s]
  • [font size="5" color="#333"] ... [/font]
  • [url href="link"] ... [/url]
  • [img alt="test"] test.jpg [/img]
  • [code lang="css"] ... [/code]
  • [code lang="js"] ... [/code]
  • [code lang="php"] ... [/code]
  • [code lang="json"] ... [/code]
  • [youtube width="560" heght="315" frameborder="0" allowfullscreen="true"] ... [/youtube]