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.