0Pricing
JavaScript Academy · Ders

querySelector ile Öğe Seçme

CSS seçicilerini kullanarak öğeleri bulun.

querySelector ile Öğe Seçme, CoddyKit'te ücretsiz bir JavaScript 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

querySelector ile tanışın

querySelector, bir CSS seçicisiyle eşleşen ilk öğeyi döndürür; hiçbir eşleşme yoksa null döner. Bu özellik document üzerinde ve her öğede bulunur.

const title = document.querySelector("h1");
console.log(title.textContent);

Her CSS seçicisi çalışır

querySelector gücünü, CSS'te kullandığınız aynı seçicileri kabul etmesinden alır: etiketler, sınıflar, kimlikler, öznitelikler ve bunların birleşimleri.

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

querySelectorAll

querySelectorAll, eşleşen tüm öğeleri statik bir NodeList olarak döndürür. Hiç eşleşme olmasa bile boş bir liste döndürür (asla null döndürmez).

const cards = document.querySelectorAll(".card");
console.log(cards.length);

Sonuçlar üzerinde döngü

querySelectorAll tarafından döndürülen bir NodeList, doğrudan forEach desteğine sahiptir; bu da yinelemeyi temiz ve kolay hâle getirir.

const items = document.querySelectorAll("li");
items.forEach((li) => {
  console.log(li.textContent);
});

Alt öğe seçicileri

CSS'te olduğu gibi, boşluk kullanarak iç içe öğeleri hedefleyebilirsiniz. Bu yöntem, bir .product içindeki tüm .price öğelerini bulur.

const prices = document.querySelectorAll(".product .price");

Sınıfları birleştirme

Sınıfları aralarında boşluk bırakmadan zincirlemek, bir öğenin tümüne sahip olması gerektiği anlamına gelir. Burada hem birincil hem de büyük olan düğmelerle eşleşiriz.

const btn = document.querySelector("button.primary.large");

Kapsamı sınırlandırılmış sorgular

querySelector çağrısını document yerine bir öğe üzerinde yapmak, yalnızca o öğenin içini arar. Bu, aramaları yerel ve hızlı tutar.

const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");

Sözde sınıflar

:first-child ve :nth-of-type gibi yapısal sözde sınıflar da çalışır.

document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");

Eşleşme yokken işlem yapma

querySelector null döndürebileceği için, sonucu kullanmadan önce kontrol ederek bir TypeError oluşmasını önleyin.

const banner = document.querySelector(".banner");
if (banner) {
  banner.classList.add("hidden");
}

Öznitelik seçicileri

Öznitelik seçicileri, veri özniteliklerine göre eşleştirme yapmanızı sağlar. Bu, sınıflara güvenmeden öğelere bağlanmak için oldukça kullanışlıdır.

const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");

querySelector ve eski arayüzler

querySelector, herhangi bir seçiciyi kabul ettiği için getElementById'den daha esnektir; ancak kimlik aramaları hâlâ biraz daha hızlıdır. İşe uygun aracı kullanın.

document.querySelector("#nav");        // flexible
document.getElementById("nav");        // fastest for ids

Hızlı kontrol

Seçiciler konusundaki anlayışınızı sınayın.

Özet

querySelector'ın ilk eşleşmeyi (veya null) döndürdüğünü, querySelectorAll'ın ise tüm eşleşmeleri içeren statik bir NodeList döndürdüğünü öğrendiniz. Her ikisi de tam CSS seçicilerini kabul eder ve aramayı bir üst öğeyle sınırlandırabilir. querySelector kullanırken her zaman null durumunu kontrol edin.

Sıkça Sorulan Sorular

“querySelector ile Öğe Seçme” dersi ücretsiz mi?

Evet — “querySelector ile Öğe Seçme” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“querySelector ile Öğe Seçme” dersinde ne öğreneceğim?

CSS seçicilerini kullanarak öğeleri bulun. JavaScript 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.

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

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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 ile Öğe Seçme” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

  1. querySelector ile Öğe Seçme
  2. getElementById ve getElementsByClassName
  3. Üst, Alt ve Kardeş Öğeler Arasında Gezinme
  4. NodeList ve HTMLCollection Karşılaştırması
← JavaScript Academy Sayfasına Dön