querySelector

CSS seçicisi ile ilk eşleşen öğeyi seçmeyi öğrenirsin.

querySelector ile CSS seçici kullanmak

querySelector bir CSS seçicisi alır ve bu seçiciye uyan ilk öğeyi döndürür. getElementById'den farkı, id dışında sınıf, etiket ve daha karmaşık seçicilerle de çalışmasıdır.

Örnekler:

document.querySelector("#save") — id'si save olan öğe.
document.querySelector(".btn") — sınıfı btn olan ilk öğe.
document.querySelector("p") — ilk <p> etiketi.

Seçicinin başındaki # veya . işaretleri yazılmalıdır; getElementById'de olduğu gibi atlanamaz.

Sık kullanılan seçiciler

querySelector tüm geçerli CSS seçicilerini kabul eder. En yaygınları şunlardır:

#id — id özniteliğine göre.
.class — sınıf özniteliğine göre.
tag — etiket adına göre.
.parent .child — belirli bir kapsayıcının içindeki öğe.

Seçici eşleşmezse null döner; tıpkı getElementById'de olduğu gibi. Bu yüzden sonucu kullanmadan önce kontrol etmek iyi bir alışkanlıktır.

Uygulama Başlığı güncelle

Sınıfı "title" olan ilk öğeyi querySelector ile seç ve heading değişkenine ata. Sonra heading.textContent'e "Başvuru" yaz.

Örnek çözümü göster

querySelector('.title') ile seç, sonra heading.textContent = 'Başvuru' yaz.
Örnek çözüm:
const heading = document.querySelector(".title");
heading.textContent = "Başvuru";

Kendini test et

Sınıfı 'btn' olan ilk öğeyi seç
- querySelector("#btn")
- querySelector("btn")
- querySelector("*btn")
- querySelector(".btn")
Cevabı göster

querySelector(".btn") — Doğru! Sınıf seçiciler . işaretiyle başlar.

Sınıf seçici ile çağır

// Sınıfı "active" olan ilk öğeyi seç
const active = document.____;

Cevabı göster

// Sınıfı "active" olan ilk öğeyi seç
const active = document.querySelector('.active');

Seçiciyi anlamıyla eşle

#save

id'si save olan öğe
.btn

sınıfı btn olan öğe
p

p etiketini temsil eden öğe
.card .title

card sınıfı içindeki title
querySelector eşleşmezse ne döner?
- null
- undefined
- Boş dize ("")
- Hata fırlatır
Cevabı göster

null — Doğru! Eşleşme yoksa null döner.

Sıradaki ders: querySelectorAll

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler