querySelectorAll

JavaScript kursu · Orta seviye · Ders 22/134

Birden fazla öğeyi seçip NodeList olarak almayı öğrenirsin.

querySelectorAll ile birden fazla öğe

querySelectorAll, bir CSS seçicisine uyan tüm öğeleri seçer ve NodeList olarak döndürür. querySelector yalnızca ilk eşleşmeyi verirken, bu yöntem tüm eşleşmeleri bir araya toplar.

Örnek: document.querySelectorAll(".item") sınıfı item olan tüm öğeleri verir. Dönen liste diziye benzer; length özelliği ve [0] gibi indeks erişimi vardır.

İçinde hiç öğe yoksa liste boş olur (uzunluk sıfır), null dönmez.

NodeList üzerinde for...of

querySelectorAll'dan dönen NodeList üzerinde for...of döngüsüyle gezilebilir. Bu, dizilerdeki for...of kullanımına benzer.

Örnek:

const items = document.querySelectorAll(".item"); for (const item of items) { console.log(item.textContent); }

Her döngü adımında item tek bir öğeyi temsil eder; tıpkı querySelector'dan dönen nesne gibi.

Uygulama Tüm öğelerin metnini yazdır

Sınıfı "task" olan tüm öğeleri querySelectorAll ile seç ve tasks değişkenine ata. Sonra for...of ile her birini gez ve console.log ile task.textContent'i yazdır.

Örnek çözümü göster

querySelectorAll('.task') ile seç, for (const task of tasks) ile gez, içeride console.log(task.textContent) yaz.
Örnek çözüm:
const tasks = document.querySelectorAll(".task");
for (const task of tasks) {
  console.log(task.textContent);
}

Kendini test et

querySelectorAll ne döndürür?
- Tek bir öğe veya null
- NodeList olarak tüm eşleşmeler
- Sıradan bir JavaScript dizisi
- HTML etiketinin kendisi
Cevabı göster

NodeList olarak tüm eşleşmeler — Doğru! Tüm eşleşmeleri NodeList olarak döndürür.

Döngüyü tamamla

const items = document.querySelectorAll(".item");
for (const item of ____) {
  console.log(item.textContent);
}

Cevabı göster

const items = document.querySelectorAll(".item");
for (const item of items) {
  console.log(item.textContent);
}

Yöntemi dönüş değeriyle eşle

getElementById

tek öğe veya null
querySelector

ilk eşleşen öğe veya null
querySelectorAll

NodeList (boş olabilir)
document.title

sayfanın başlığı (dize)
Hiç öğe yoksa querySelectorAll ne döner?
- null döner
- Hata fırlatır
- Boş NodeList döner (length 0)
- undefined döner
Cevabı göster

Boş NodeList döner (length 0) — Doğru! Eşleşme yoksa boş NodeList döner, null değil.

querySelectorAll