11. SınıfBilişim Teknolojileri

DOM ve Olaylar — Çalışma Sayfası

Kazanımlar, önemli noktalar ve sık yapılan hatalar tek sayfada.

Bu konuda öğrenecekleriniz

DOM ağacında eleman seçme ve sınıf-metin güncelleme işlemlerini uygular.
Olay dinleyicilerini bağlayıp preventDefault ile varsayılan davranışı yönetir.
Olay delegation yaklaşımıyla dinamik elemanlarda olay yakalar.
fetch ile GET-POST isteklerini async-await akışında gönderir ve durum kodunu yorumlar.
Kullanıcı verisinin doğrudan HTML'e yazılmaması gerektiğini güvenlik açısından açıklar.

querySelector tek eleman, querySelectorAll NodeList döndürür.
Eklenen her dinleyici bellek tutar; delegation ile tek dinleyici çok satırı kapsar.
Kullanıcı metni innerHTML ile gömülürse DOM enjeksiyonu oluşur.
Sunucu 404 döndüğünde fetch reddolmaz; response.ok denetimi şarttır.
submit olayında doğrulama sonrası preventDefault çağrılmalıdır.
data- nitelikleri, hangi satırda işlem yapıldığını belirlemenin güvenilir yoludur.

document.querySelector('seçici') ilk eşleşen elemanı, querySelectorAll tümünü döndürür.
Sınıf değişimi: classList.add / remove / toggle.
Metin yazımı: textContent güvenlidir, innerHTML etiketleri çalıştırır.
Form gönderimi: preventDefault yoksa sayfa yenilenir ve değerler kaybolur.
Delegation: olay en yakın sabit üstte dinlenir, event.target.closest ile satır bulunur.
fetch yanıtında response.ok false ise durum koduna göre hata üretilir.
POST gövdesi: headers Content-Type application/json ve body JSON.stringify(veri).

Formda preventDefault çağırmamak: Sayfa yenilenir, girilen değerler kaybolur ve gelen istek kaybolur.
Yeni eklenen satıra ayrı ayrı dinleyici bağlamak: Eklenen elemanlar kapsanmaz, dinleyiciler birikir; delegation kullanılmalıdır.
fetch yanıtını kontrol etmeden json çağırmak: 404 veya 500 gövdesi beklenen JSON olmayabilir, çözümleme hatası çıkar.
Kullanıcı metnini innerHTML ile yazmak: Etiketler çalışır ve DOM enjeksiyonu ile oturum çalma riski doğar.
querySelector ile tümü beklemek: querySelector yalnız ilk eşleşeni döndürür, diğerleri için querySelectorAll gerekir.

Sınavda olay sorusunda önce hedefi, sonra dinleyicinin bağlandığı yeri sor.
Dinamik liste sorularında delegation ve closest ipucunu ara.
fetch sorularında dört adımı sırayla yaz: istek, ok denetimi, JSON, çizim.
DOM güvenliği sorusunda cevap daima textContent ya da kaçıştır.
Önce sayfayı çalışır hâle getir, sonra hata yolunu test et; hata yolu da senin testindir.

Bu sayfayı okuduktan sonra konu anlatımını tekrar oku ve kendi cümlelerinle özetle.