Yükleniyor...

Öğeleri seçme

Fırın rafında bir başlık ve üç fiş durur. Başlık Rye der. Fişler vardiyayı yazar: Morning, Noon, Evening. Son fişin bir de sold sınıfı vardır. Raf, id’si shelf olan bir main öğesidir. İçinde id’si loaf olan bir h2, ardından sınıfı tag olan üç p vardır. Seçmek, canlı belgeden bu düğümleri senin koyduğun adla istemektir. document.getElementById("loaf") başlığı döndürür ve metni Rye’dir. document.getElementsByClassName("tag") uzunluğu 3 olan canlı bir liste döndürür. document.querySelector(".tag") ilk fişi döndürür, yani Morning. document.querySelectorAll(".tag") sabit bir liste döndürür ve 1. konum Noon’dur. Rafın hiç yazmadığı ad, querySelector için null, querySelectorAll için uzunluğu 0 olan bir listedir.

Beş çağrı, ağaçta aşağı inmek değil

DOM sayfası bir başlığın atasını adlandırıyor ve öğe çocuklarını bütün düğümlerle sayıyordu. Bu sayfa parentElement, nextElementSibling ve children okumaz, Math da çağırmaz. Ağaç zaten duruyor. Burada hangi çağrının tek düğüm, hangisinin liste verdiğini ve hangi sonucun hiçbir şeyin uymadığını söylediğini ayırırsın.

Her çağrı ne döndürür

Sayıyı yalnızca başlık ile üç fişin durduğu rafta al. Aşağıdaki okuma dosyası bir paragraf daha ekler, bu yüzden orada p sayısı değişir.

📊 Her çağrı ne döndürür

Çağrı Ne gelir Bu rafta Kolay karışır
getElementById("loaf") bir öğe ya da null başlık metni Rye konumdan okunacak bir liste
getElementsByClassName("tag") canlı HTMLCollection uzunluk 3 noktayı yazmak, .tag gibi
getElementsByTagName("p") canlı HTMLCollection uzunluk 3 başlığın kendisi, o bir h2
querySelector(".tag") ilk eşleşme ya da null Morning fişi bütün fişler
querySelectorAll(".tag") statik NodeList uzunluk 3; 1. konum Noon canlı bir koleksiyon
querySelectorAll(".oven") boş NodeList uzunluk 0 null

Sınıf metodu ile CSS seçicisi noktayı aynı yazmaz. getElementsByClassName("tag") çıplak tag adını ister. getElementsByClassName(".tag") adı gerçekten .tag olan bir sınıf arar ve uzunluk 0 döndürür. querySelector CSS ister, nokta .tag üzerinde kalır. querySelector("tag") etiket adı tag olan bir öğe arar, bulamaz ve null döndürür. 0. konum ilk fiştir. 1. konum Noon’dur. getElementsByClassName listesi canlıdır: sonraki sayfa bir tag fişi daha eklerse uzunluk büyür. querySelectorAll çağrı anındaki uzunluğu tutar. Evening iki sınıf taşır, tag ve sold; uzunluğu 3 olan listenin içindedir ve sold için tek eşleşmedir.

Bir id, bir öğe

Bir id sayfada tek olmalıdır. getElementById o tek öğeyi döndürür; id yoksa null gelir. Liste döndürmez. Bu metot yalnızca document üzerindedir, öğenin kendisinde değil.

Bir id

javascript 
let loaf = document.getElementById("loaf");
console.log(loaf.textContent);
console.log(loaf === null);

İlk satır Rye. İkinci satır false, çünkü başlık rafta duruyor. İki öğe loaf id’sini paylaşsa bile çağrı belgedeki ilkini döndürür.

Sınıf adı ve etiket adı

İki çağrı da canlı bir HTMLCollection döndürür. Tek fiş almadan önce length oku. Sayım dört öğelik raftadır, okuma dosyasında değil.

Sınıf ve etiket

javascript 
console.log(document.getElementsByClassName("tag").length);
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByClassName("sold").length);

Satırlar 3, 3 ve 1. Üç fiş tag sınıfını paylaşır. Üçü de p öğesidir, başlık ise h2 olduğu için bu rafta etiket sayısı sınıf sayısıyla aynıdır. Yalnızca Evening’de sold vardır. getElementsByClassName(".tag") başka bir çağrıdır: nokta sınıf adının parçası değildir, o uzunluk 0 olur.

İlk CSS eşleşmesi

querySelector tek öğe döndürür, belge sırasındaki ilkini, ya da null.

İlk eşleşme

javascript 
console.log(document.querySelector(".tag").textContent);
console.log(document.querySelector("#shelf .sold").textContent);

İlk satır Morning. İkinci satır Evening. #shelf .sold, rafın kendisi değil, rafın içindeki sold sınıflı öğe demektir. document.getElementById("shelf").querySelector(".sold") aramayı raftan başlatır ve aynı Evening fişine iner.

Bütün eşleşmeler, sonra konum

querySelectorAll her eşleşmeyi statik bir NodeList içinde döndürür. Liste boş olabilir. Kendisi null değildir.

Bütün eşleşmeler

javascript 
let tags = document.querySelectorAll(".tag");
console.log(tags.length);
console.log(tags[1].textContent);

Uzunluk 3. 1. konum Noon. 0. konum Morning, 2. konum Evening. Sonraki bir betik fiş eklerse bu liste büyümez. getElementsByClassName("tag") ile gelen HTMLCollection büyür. Biri o anın fotoğrafıdır, öteki canlı kalır.

Rafın yazmadığı bir ad

Dosyada olmayan bir id ve bir sınıf iste.

Hiçbiri uymadı

javascript 
console.log(document.getElementById("oven"));
console.log(document.querySelector(".oven"));
console.log(document.querySelectorAll(".oven").length);

İlk satır null. İkinci satır null. Üçüncü satır 0. Hiçbir şey uymasa da querySelectorAll bir liste döndürür; uzunluk 0’dır ve listenin kendisi null değildir. getElementById döndürecek bir liste tutmaz, bu yüzden ıskalama null olur, 0 değil.

Sayfada bir satır

Bir paragraf kaç tag fişi olduğunu, ilk fişi ve sold fişini söyler. Betik body’nin sonundadır, öğeler varken. Satır paragrafının tag sınıfı yoktur, bu yüzden üç fişten biri değildir.

Sayfa demosu — üç fiş

html 
<!DOCTYPE html>
<html>
<head>
<title>selecting — page</title>
</head>
<body>
<main id="shelf">
<h2 id="loaf">Rye</h2>
<p class="tag">Morning</p>
<p class="tag">Noon</p>
<p class="tag sold">Evening</p>
<p id="line">…</p>
</main>
<script>
let tags = document.querySelectorAll(".tag");
let line = document.getElementById("line");
line.textContent = tags.length + " / " + tags[0].textContent + " / " + document.querySelector(".sold").textContent;
</script>
</body>
</html>

Paragraf 3 / Morning / Evening yazar. Bu dosyada getElementsByTagName("p") 4 sayar, çünkü satır bir p dahadır. querySelectorAll(".tag") yine 3 sayar. Sonraki sayfa, bu çağrıların çoktan bulduğu öğelerin HTML’ini değiştirir.

Rafı denetle

  1. Başlık metnini yazdır, Rye bekle; sonra null denetimi ve false bekle
  2. Sınıf uzunluğunu, p uzunluğunu ve sold uzunluğunu yazdır: 3, 3 ve 1
  3. İlk .tag metnini yazdır, Morning bekle; sonra #shelf .sold ve Evening bekle
  4. querySelectorAll uzunluğunu yazdır, 3 bekle; 1. konum Noon olmalı
  5. Olmayan id’yi ve olmayan querySelector çağrısını yazdır; ikisi de null
  6. querySelectorAll(".oven").length yazdır ve 0 bekle
  7. Paragrafı oku ve 3 / Morning / Evening bekle

Yanlış çağrı

Sayfa açık kalır. Yazdığın çağrı başka bir şey istemiştir.

  • .tag değerini getElementsByClassName içine vermek; nokta yalnızca CSS seçicisine aittir
  • Noktasız tag değerini querySelector içine verip fişleri beklemek
    1. konumu ilk fiş sanmak
  • querySelectorAll ıskasını null saymak; uzunluk 0’dır
  • getElementById ıskasını uzunluğu 0 olan liste saymak
  • Okuma dosyasında getElementsByTagName("p") sayıp 3 beklemek
  • HTMLCollection üzerinde .map çağırmak; bu bir dizi değildir
  • Bu sayfada parentElement okumak; o, ağaç sayfasının işiydi

Yanında götür

  • getElementById bir öğe döndürür ya da null
  • getElementsByClassName ve getElementsByTagName canlı bir HTMLCollection döndürür
  • Sınıf metodu tag ister, .tag değil
  • querySelector ilk CSS eşleşmesini döndürür ya da null
  • querySelectorAll statik bir NodeList döndürür; ıskanın uzunluğu 0’dır
    1. konum Morning, 1. konum Noon
  • Sonraki sayfa, seçtiğin öğelerin HTML’ini değiştirir

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 45 / 45
Javascript Ders