Web Geliştirmede `querySelector` ve `querySelectorAll` ile DOM'da Ustalaşın 
Selam dostlar! Uzun süredir forumda takılıyorum ve sık sık "JavaScript'te bir elementi nasıl seçerim?" sorusunu görüyorum. Eskiden `getElementById` veya `getElementsByClassName` ile başlıyorduk ama artık modern web geliştirmede işler biraz daha şık ilerliyor. Bugün sizlere, DOM ile çalışırken hayatınızı inanılmaz kolaylaştıracak iki süper kahramandan bahsedeceğim: `querySelector` ve `querySelectorAll`.
Neden bu kadar önemliler? Çünkü CSS seçicilerinin gücünü doğrudan JavaScript'e taşıyorlar. CSS yazarken kullandığınız her türlü hassas seçim tekniğini artık JS'de de kullanabilirsiniz. Hadi gelin bu ikilinin büyüsünü birlikte keşfedelim.
`querySelector`: Tek Hedef, İsabetli Atış
`querySelector`, adı üstünde, bir "sorgu" yapar ve belge içinde CSS seçicinize uyan İLK elementi döndürür. Tıpkı bir keskin nişancı gibi!
Temel kullanımı şöyle:
Gördüğünüz gibi, tıpkı CSS'de yazdığınız gibi her türlü kombinasyonu kullanabiliyorsunuz. `:first-child`, `:last-of-type`, `[data-type="button"]` gibi süper güçlü seçiciler de tamamen geçerli!
`querySelectorAll`: Toplu İşlem, Tümünü Getir
Peki ya bir class'a sahip TÜM elementlere ulaşmak isterseniz? İşte o zaman `querySelectorAll` sahneye çıkıyor. Bu metod, eşleşen tüm elementleri bir NodeList koleksiyonu olarak döndürür.
Burada kritik nokta, dönen değerin bir NodeList olması. Bu, diziye benzer bir yapıdır ve üzerinde `forEach` döngüsü ile gezinebilirsiniz.
Neden Bu İkiliyi Tercih Etmeliyiz?
Pratik İpuçları ve Dikkat Edilmesi Gerekenler
1. Seçiciyi Doğru Yazın: ID seçerken `#`, class seçerken `.` koymayı unutmayın. En sık yapılan hata budur!
2. Belirli Bir Alan İçinde Arama Yapın: Sadece `document` üzerinde değil, herhangi bir element üzerinde de arama yapabilirsiniz. Bu, performans için harikadır.
3. Eşleşme Yoksa: `querySelector` eşleşme bulamazsa `null`, `querySelectorAll` ise boş bir NodeList döndürür. Kodunuzu buna göre yazın.
4. Performans: Çok karmaşık seçiciler (özellikle `:hover` gibi psödo-sınıflar) performansı etkileyebilir. Mümkün olduğunca basit ve spesifik seçiciler kullanın.
Küçük Bir Örnek Proje: Dinamik Sekmeler (Tabs)
Bu bilgileri basit bir sekme bileşeni yaparak pekiştirelim:
Gördüğünüz gibi, `querySelectorAll` ile tüm buton ve panelleri kolayca aldık, `querySelector` ile de hedef paneli bulduk. Temiz ve anlaşılır!
**Son Söz**
`querySelector` ve `querySelectorAll`, modern JavaScript DOM manipülasyonunun temel taşları. Bu iki metodu iyi öğrenmek, frontend yolculuğunuzda size çok zaman kazandıracak ve kodunuzu daha okunabilir hale getirecektir.
Herkese hatasız ve keyifli kodlar dilerim! Takıldığınız bir yer olursa yorumlarda buluşalım.
Selam dostlar! Uzun süredir forumda takılıyorum ve sık sık "JavaScript'te bir elementi nasıl seçerim?" sorusunu görüyorum. Eskiden `getElementById` veya `getElementsByClassName` ile başlıyorduk ama artık modern web geliştirmede işler biraz daha şık ilerliyor. Bugün sizlere, DOM ile çalışırken hayatınızı inanılmaz kolaylaştıracak iki süper kahramandan bahsedeceğim: `querySelector` ve `querySelectorAll`.
Neden bu kadar önemliler? Çünkü CSS seçicilerinin gücünü doğrudan JavaScript'e taşıyorlar. CSS yazarken kullandığınız her türlü hassas seçim tekniğini artık JS'de de kullanabilirsiniz. Hadi gelin bu ikilinin büyüsünü birlikte keşfedelim.
`querySelector`: Tek Hedef, İsabetli Atış
`querySelector`, adı üstünde, bir "sorgu" yapar ve belge içinde CSS seçicinize uyan İLK elementi döndürür. Tıpkı bir keskin nişancı gibi!
Temel kullanımı şöyle:
Kod:
// ID'ye göre seçim (önceki # işaretini unutmayın!)
const header = document.querySelector('#main-header');
// Class'a göre seçim (önceki . işaretini unutmayın!)
const activeItem = document.querySelector('.menu-item.active');
// Element tipine göre seçim
const firstParagraph = document.querySelector('p');
// Daha karmaşık bir seçim: Bir container içindeki ilk link
const navLink = document.querySelector('nav ul li:first-child a');Gördüğünüz gibi, tıpkı CSS'de yazdığınız gibi her türlü kombinasyonu kullanabiliyorsunuz. `:first-child`, `:last-of-type`, `[data-type="button"]` gibi süper güçlü seçiciler de tamamen geçerli!
`querySelectorAll`: Toplu İşlem, Tümünü Getir
Peki ya bir class'a sahip TÜM elementlere ulaşmak isterseniz? İşte o zaman `querySelectorAll` sahneye çıkıyor. Bu metod, eşleşen tüm elementleri bir NodeList koleksiyonu olarak döndürür.
Kod:
// Tüm butonları seç
const allButtons = document.querySelectorAll('button');
// Tüm uyarı mesajlarını seç
const warnings = document.querySelectorAll('.alert.warning');
// Bir listenin tüm çocuklarını seç
const listItems = document.querySelectorAll('#myList > li');Burada kritik nokta, dönen değerin bir NodeList olması. Bu, diziye benzer bir yapıdır ve üzerinde `forEach` döngüsü ile gezinebilirsiniz.
Kod:
// Tüm görseller üzerinde işlem yapalım
const images = document.querySelectorAll('article img');
images.forEach((img, index) => {
console.log(`${index}. resim: ${img.src}`);
// Her bir resme bir event listener ekleyebilirsiniz
img.addEventListener('click', handleImageClick);
});Neden Bu İkiliyi Tercih Etmeliyiz?
- Tutarlılık: CSS'de kullandığınız seçici bilginiz doğrudan JavaScript'e aktarılır. Aynı dili konuşursunuz.
- Esneklik: `getElementsByClassName` sadece class, `getElementById` sadece ID ile çalışır. Bu ikisi ise her şeyle çalışır!
- Güç: `div.card.highlighted[data-visible="true"]` gibi karmaşık seçimleri tek satırda yapabilirsiniz.
- Statik NodeList: `querySelectorAll`'ın döndürdüğü NodeList statiktir. Sayfa değişse bile seçim anındaki elementleri tutar (bu duruma dikkat etmek gerekebilir).
Pratik İpuçları ve Dikkat Edilmesi Gerekenler
1. Seçiciyi Doğru Yazın: ID seçerken `#`, class seçerken `.` koymayı unutmayın. En sık yapılan hata budur!
Kod:
// YANLIŞ
const item = document.querySelector('myId');
// DOĞRU
const item = document.querySelector('#myId');2. Belirli Bir Alan İçinde Arama Yapın: Sadece `document` üzerinde değil, herhangi bir element üzerinde de arama yapabilirsiniz. Bu, performans için harikadır.
Kod:
const sidebar = document.querySelector('.sidebar');
// Sadece sidebar içindeki linkleri seç
const sidebarLinks = sidebar.querySelectorAll('a');3. Eşleşme Yoksa: `querySelector` eşleşme bulamazsa `null`, `querySelectorAll` ise boş bir NodeList döndürür. Kodunuzu buna göre yazın.
Kod:
const element = document.querySelector('.olmayan-bir-class');
if (element) {
// Element varsa buraya gir
element.style.color = 'red';
}4. Performans: Çok karmaşık seçiciler (özellikle `:hover` gibi psödo-sınıflar) performansı etkileyebilir. Mümkün olduğunca basit ve spesifik seçiciler kullanın.
Küçük Bir Örnek Proje: Dinamik Sekmeler (Tabs)
Bu bilgileri basit bir sekme bileşeni yaparak pekiştirelim:
Kod:
// HTML'deki sekme butonlarını ve içerik panellerini seç
const tabButtons = document.querySelectorAll('.tab-button');
const tabPanels = document.querySelectorAll('.tab-panel');
// Her bir butona tıklanma olayını dinle
tabButtons.forEach(button => {
button.addEventListener('click', () => {
// Önce tüm buton ve panelleri "aktif" durumundan çıkar
tabButtons.forEach(btn => btn.classList.remove('active'));
tabPanels.forEach(panel => panel.classList.remove('active'));
// Tıklanan butonu aktif yap
button.classList.add('active');
// Hangi panele geçiş yapacağımızı data özelliğinden bul
const targetPanelId = button.getAttribute('data-target');
const targetPanel = document.querySelector(`#${targetPanelId}`);
// Hedef paneli aktif yap
if(targetPanel) {
targetPanel.classList.add('active');
}
});
});Gördüğünüz gibi, `querySelectorAll` ile tüm buton ve panelleri kolayca aldık, `querySelector` ile de hedef paneli bulduk. Temiz ve anlaşılır!
**Son Söz**
`querySelector` ve `querySelectorAll`, modern JavaScript DOM manipülasyonunun temel taşları. Bu iki metodu iyi öğrenmek, frontend yolculuğunuzda size çok zaman kazandıracak ve kodunuzu daha okunabilir hale getirecektir.
Herkese hatasız ve keyifli kodlar dilerim! Takıldığınız bir yer olursa yorumlarda buluşalım.