jQuery’nin en büyük avantajlarından birisi seçici kullanımının basitiliğidir. CSS seçicilerini javascript’e kazandıran bu kullanım kolaylığı sizzle kütüphanesinden gelir. Javascript bu konuda daha sığ ve beceriksiz kaldı. Tabi sonra işler değişti ve artık aynı yeteneklere sahip.

Seçicilerdeki bu büyük atılımı sağlayan iki özellik var querySelector ve querySelectorAll.

Element.querySelector()

Belirtilen öğenin ilk alt elemanını döndürür.

element = anaElement.querySelector(secici);

Buradaki secici kısmında aklınıza gelecek tüm CSS seçicileri konabiliyor. İşte süperlik buradan kaynaklanıyor. a:before, p[title], p > span, ul li ~ li, vs.

Eğer element bulunamazsa null değeri döner.

Element.querySelectorAll()

Belirtilen öğe grubunun tüm alt elemanlarını döndürür.

elementList = baseElement.querySelectorAll(seciciler);

Buradaki seciciler kısmında aklınıza gelecek tüm CSS seçicileri konabiliyor.

Yukarıdaki özelliğin çoklusu. Bu seçici sonucunda bir dizi element döner.

var el = document.querySelector('#test'); 
var aktifElemanlar = el.querySelectorAll('div.aktif > p');

aktif eleman altındaki tüm paragrafları yakalamamızı sağlar.

Tarayıcı desteği konusunda da çok iyi bir durumdalar. IE8+ destekleri var.

Javascript seçicilerini iki gruba ayıracağız.

  • Ana eleman seçicileri
  • DOM ilişkilerine dayanan seçiciler

Ana eleman seçicileri

CSS derslerinden alışık olduğumuz gibi seçiciler javascript dünyasında da önemli bir yere sahiptir. Kod yazarlarının en çok kullandığı araçlardan biridir seçiciler. Seçiciler ne kadar gelişmiş olursa, bizlere kod yazarken o kadar rahatlık sağlıyor.

Tekil (ID) seçiciler

CSS’den alışık olduğumuz ID seçiciler sayfada bir tane bulunan bir elemanı yakalamak için kullanılır. En büyük avanatjı hızdır.

<div id="trabzon"></div>

Sayfamızda tek bir trabzon id’li elemanı yakalamak için

jQuery ile

var trabzon = $('#trabzon');

Javascript ile

var trabzon = document.getELementById('trabzon');

Tarayıcı desteğinin IE5.5+ olması ne kadar eski olduğunu gösteriyor.

veya

var tarabzon = document.querySelector('#trabzon');

her ne kadar daha yavaş olasa da bir tercih olarak kenarda dursun.

Sınıf (class) seçicileri

Sayfada birden fazla elemanı yakalamk için kullandığımız HTML özniteliğidir.

jQuery ile

var sehir = $('.sehir');

Javascript ile

var sehir = document.getElementsByClassName('sehir');

Bu seçici tüm class=”sehir” tanımlı elemanları bulur ve bize bir dizi olarak döner.

Tüm yeni nesil tarayıcılar ve IE8+ desteği vardır.

veya

var sehir = document.querySelectorAll('.sehir');

her ne kadar daha yavaş olasa da bu da bir tercih.

Etiket (tag) seçicisi

HTML etiketlerini kullanarak seçim yapmamızı sağlar.

jQuery

var katman = $('div');

Javascript ile

var katman = document.getElementsByTagName('div');

Bu seçici tüm <div> etiketli elemanları bulur ve bize bir dizi olarak döner.

IE5.5+ desteği var.

veya

var katman = document.querySelectorAll('div');

her ne kadar daha yavaş olasa da bu da bir tercih.

Öznitelik (attribute) seçicileri

Özellik Seçicileri HTML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre seçim yapmamızı sağlar.

<img src="logo.gif" alt="Logo" width="32" height="41" />

jQuery ile

$('[alt="logo"]');

Javascript ile

document.querySelectorAll('[alt="logo"]');

jQuery benzer bir kullanım var.

Sözde sınıf (Pseudo-class) seçicileri

Aslında bir HTML sınıfı olmamasına rağmen sözde olarak oluşturulan sınıfları yakalamak için kullanılır. CSS’ten alışık olduğumuz bir seçici.

jQuery ile

var metinAlani = $('input:focus');

Javascript ile

var metinAlani = document.querySelectorAll('input:focus');

Süper değil mi?

Sonuç

jQuery’nin elindeki en büyük kozlardan birisi olan kolay seçici kullanımını aynı kolaylık ile javascript ile yapabiliyor olmak sevindirici.

Bir sonraki yazımda DOM ilişkilerine dayanan seçicilerden bahsedeceğim.

Kalın sağlıcakla.

Kaynaklar

HTML Öznitelikleri ve DOM özellikleri

**DOM (Belge Nesnesi Modeli)** HTML ile javascript'i birbirine bağlar. DOM, HTML dokümanındaki tüm elamanları ağaç yapısı mantığıyla nesn...… Devamını oku

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.

jQuery'ye büyük darbe Javascript ve seçiciler - 2

21 September 2017 tarihinde yayınlandı.