Modern web sayfalarında JavaScript, sayfa içeriğini değiştirmek, kullanıcıyla etkileşime girmek ve dinamik içerikler oluşturmak için çok sık kullanılır. Ancak tüm bu işlemleri yapabilmek için önce sayfadaki belirli HTML öğelerine ulaşmamız gerekir. Bu işleme “element seçimi” denir.
JavaScript bize bu amaçla çeşitli yöntemler sunar. Bu yazıda, element seçiminin en güçlü ve esnek yollarından ikisi olan querySelector ve querySelectorAll yöntemlerini detaylı bir şekilde öğreneceğiz.
querySelector Nedir?
querySelector, JavaScript’te bir web sayfasındaki ilk eşleşen HTML öğesini bulmak için kullanılır. Bu yöntemin en güzel yanı, CSS’te kullandığımız seçici (selector) sözdizimiyle çalışmasıdır. Yani etiket adı, class, id, ya da daha karmaşık seçim yapıları ile çalışabiliriz.
Kullanım Şekli:
Buradaki "seçici" kısmına, CSS’te kullandığımız şekilde yazdığımız bir ifade gelir.
document.querySelector('seçici')
Örnek 1: Etiket İsmi ile Seçim
const başlık = document.querySelector('h2');
Bu komut, sayfadaki ilk <h2> etiketini seçer.
Örnek 2: ID ile Seçim
const menü = document.querySelector('#anaMenu');
Burada id="anaMenu" olan ilk öğe seçilir. # işareti, CSS’te olduğu gibi ID seçimi anlamına gelir.
Örnek 3: Class (Sınıf) ile Seçim
const uyarıKutusu = document.querySelector('.uyarı');
Bu örnekte, class="uyarı" olan ilk öğe seçilir. Class seçimi için . (nokta) kullanılır.
Örnek 4: Özellik (Attribute) ile Seçim
const özelGörsel = document.querySelector('img[alt="doğa"]');
Bu komut, alt özelliği “doğa” olan ilk <img> (görsel) öğesini seçer.
Örnek 5: İç İçe Seçicilerle Karmaşık Seçim
const içLink = document.querySelector('nav ul li a');
Bu ifade, <nav> etiketi içindeki bir <ul> listesinde bulunan <li> öğesinin içindeki ilk <a> (bağlantı) etiketini bulur.
Not: querySelector her zaman ilk eşleşen öğeyi getirir. Eğer sayfada birden fazla öğe eşleşiyorsa sadece bir tanesi seçilir.
querySelectorAll Nedir?
Eğer sadece ilk öğeyi değil, tüm eşleşen öğeleri almak istiyorsak, querySelectorAll kullanmalıyız. Bu yöntem, bize birden fazla öğeyi içeren bir liste (NodeList) döner.
Kullanım Şekli:
document.querySelectorAll('seçici')
Bu yöntemle, yazdığımız seçiciyle eşleşen tüm öğeleri alabiliriz.
Örnek 1: Tüm Paragrafları Seçme
const paragraflar = document.querySelectorAll('p');
Bu, sayfadaki tüm <p> etiketlerini getirir.
Örnek 2: Belirli Class’a Sahip Öğeleri Seçme
const kartlar = document.querySelectorAll('.ürün-kartı');
Bu ifade, class="ürün-kartı" olan tüm öğeleri getirir.
Örnek 3: Belirli Etikete Sahip Öğeleri İç İçe Seçme
const linkler = document.querySelectorAll('footer a');
Bu örnek, sayfadaki <footer> etiketi içindeki tüm <a> (bağlantı) etiketlerini getirir.
querySelectorAll ile Döngü Kullanmak
querySelectorAll ile elde ettiğimiz sonuç bir NodeList (dizi benzeri yapı) olduğu için, bu öğeleri for...of döngüsü ile tek tek işleyebiliriz.
Örnek: Tüm Butonlara Metin Ekleme
const butonlar = document.querySelectorAll('.hareketButonu');
for (let buton of butonlar) {
buton.textContent += ' (tıklayın)';
}
Bu kod, class="hareketButonu" olan tüm butonlara, metinlerinin sonuna “(tıklayın)” ekler.
querySelector ve querySelectorAll Arasındaki Fark
| Özellik | querySelector | querySelectorAll |
|---|
| Kaç öğe seçer? | İlk eşleşen öğe | Tüm eşleşen öğeler |
| Ne döner? | Tek bir öğe (Element) | NodeList (liste) |
| Döngüde kullanılır mı? | Hayır (tek öğe olduğu için gerek yok) | Evet (birden çok öğe için) |
Neden Bu Yöntemleri Kullanmalıyız?
Daha önce JavaScript’te öğe seçmek için getElementById, getElementsByClassName, gibi yöntemler vardı. Ancak bu yöntemler sadece belirli türde seçimler yapabiliyorlardı. Örneğin, bir öğeyi hem class hem de attribute ile seçmek mümkün değildi.
querySelector ve querySelectorAll ise çok daha esnektir. CSS’te nasıl seçim yapıyorsak, burada da aynı mantıkla seçim yapabiliriz. Bu da hem öğrenmeyi kolaylaştırır hem de kodu daha okunabilir hale getirir.
Tarayıcı Uyumluluğu
querySelector ve querySelectorAll günümüzün bütün modern tarayıcılarında desteklenmektedir. Bu nedenle güvenle kullanılabilir.
Sonuç
JavaScript’te bir web sayfasının içeriğini değiştirmek istiyorsak, önce öğeleri seçebilmeliyiz. Bu yazıda öğrendiğimiz querySelector ve querySelectorAll yöntemleri, bu işi yapmanın en esnek ve modern yollarıdır. İster tek bir öğe, ister tüm benzer öğeleri seçmek isteyin, bu iki yöntem ihtiyacınızı karşılayacaktır.