Frontend Academy · Ders

querySelector ve querySelectorAll

CSS seçici dizelerini kullanarak tek ve birden çok öğe bulun; NodeList ile HTMLCollection arasındaki farkı öğrenin.

querySelector ve querySelectorAll, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

DOM Nedir?

Belge Nesne Modeli, HTML yapısını temsil eden bir JavaScript nesneleri ağacıdır. JavaScript, DOM ile etkileşime girerek öğeleri okuyabilir, değiştirebilir, add işlemiyle ekleyebilir ve kaldırabilir; böylece web sayfalarını dinamik hâle getirir.

getElementById

Klasik seçici. document.getElementById('myId'), bu kimliğe sahip öğeyi döndürür; öğe bulunamazsa null döner. Hızlıdır, ancak yalnızca kimliklerle çalışır.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — Tek Öğe

document.querySelector(cssSelector), herhangi bir CSS seçicisiyle eşleşen ilk öğeyi döndürür. Hiçbir eşleşme bulunamazsa null döner. getElementById yöntemine göre daha esnektir.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — Birden Çok Öğe

document.querySelectorAll(cssSelector), eşleşen tüm öğelerden oluşan statik bir NodeList döndürür. Bu, canlı bir dizi değildir; üzerinde yineleme yapmanız gerekir. Dizi yöntemlerini kullanmak için Array.from() veya yayma sözdizimini kullanın.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Kapsamlandırılmış Sorgular

Yalnızca o alt ağaç içinde arama yapmak için querySelector yöntemini herhangi bir öğe üzerinde çağırabilirsiniz; arama belgenin tamamında yapılmaz. Bu yaklaşım daha verimlidir ve sayfanın diğer bölümlerindeki öğelerin yanlışlıkla seçilmesini önler.

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList ve HTMLCollection Karşılaştırması

NodeList (querySelectorAll ile elde edilir) statiktir; sorgunun yapıldığı andaki DOM durumunu yansıtır. HTMLCollection (getElementsByClassName vb. yöntemlerle elde edilir) canlıdır; DOM değiştikçe otomatik olarak güncellenir. Her ikisi de dizi benzeri yapılardır, ancak dizi değildir.

DOM'da Gezinme

Herhangi bir öğeden şu yollarla gezinebilirsiniz: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Bir Öğenin Var Olup Olmadığını Denetleme

Sonucu kullanmadan önce querySelector yönteminin null döndürmediğini her zaman kontrol edin; özellikle de bazı sayfalarda bulunmayabilecek öğeler için.

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() ve closest()

element.matches(selector), öğe seçiciyle eşleşiyorsa true döndürür. element.closest(selector), DOM ağacında yukarı doğru ilerler ve seçiciyle eşleşen ilk üst öğeyi döndürür; eşleşme yoksa null döner.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement), alt öğe üst öğenin içinde bulunuyorsa veya alt öğe üst öğenin kendisiyse true döndürür. Bir tıklamanın modalın ya da açılır menünün dışında gerçekleşip gerçekleşmediğini denetlemek için kullanışlıdır.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Performans: DOM Sorgularını Azaltma

DOM sorguları ücretsiz değildir. querySelector yöntemini tekrar tekrar çağırmak yerine sonucu bir değişkende önbelleğe alın. Döngülerde, gereksiz yerleşim yeniden hesaplamalarını önlemek için DOM okumalarını ve DOM yazmalarını ayrı ayrı toplu hâlde yapın.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Hızlı Kontrol

Eşleşen tüm öğelerden oluşan statik bir NodeList hangi yöntemle döndürülür?

Özet: DOM Öğelerini Seçme

querySelector ilk eşleşmeyi döndürür. querySelectorAll tüm eşleşmeleri statik bir NodeList olarak döndürür. Verimlilik için sorguları bir alt ağaçla sınırlandırın. Sorgu sonuçlarını önbelleğe alın. Olay devretme için closest() kullanın. Sorguyla alınan bir öğeyi kullanmadan önce her zaman null kontrolü yapın.

Sıkça Sorulan Sorular

“querySelector ve querySelectorAll” dersi ücretsiz mi?

Evet — “querySelector ve querySelectorAll” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“querySelector ve querySelectorAll” dersinde ne öğreneceğim?

CSS seçici dizelerini kullanarak tek ve birden çok öğe bulun; NodeList ile HTMLCollection arasındaki farkı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“querySelector ve querySelectorAll” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

querySelector ve querySelectorAll
addEventListener ve Olay Nesnesi
İçeriği Değiştirme: textContent innerHTML classList
Öğe Oluşturma ve Ekleme

← Frontend Academy Sayfasına Dön