DOM ve Olaylar

Konu Anlatımı

DOM ve Olaylar

DOM (Belge Nesne Modeli), tarayıcının HTML belgesini hafızada ağaç hâline getirmiş hâlidir; JavaScript bu ağaca dokunarak sayfayı çalışma anında değiştirir. Olaylar ise bu ağacın üzerindeki kullanıcı etkileşimidir: tıklama, yazma, gönderme. Bu konuda eleman seçme ve güncelleme, olayların doğru bağlanması, dinamik listelerde delegation ve sunucudan veri çekme işlenir. Güvenlik açısından kritik kural şudur: kullanıcıdan gelen metin doğrudan HTML'e gömülmez, aksi hâlde etiket çalışır ve DOM enjeksiyonu oluşur.

1. DOM Ağacı ve Eleman Seçme

Seçim document.querySelector ile ilk eşleşen, document.querySelectorAll ile tüm eşleşenleri döndürür; getElementById ise id ile tek elemanı alır. Sınıf işlemleri classList.add, classList.remove ve classList.toggle ile yapılır; böylece görünüm değişimi tek noktadan yönetilir. Metin yazmak için textContent kullanılır: HTML olarak yorumlanmadığı için güvenlidir. Buna karşılık innerHTML içerdiği etiketleri çalıştırır; yalnızca kendi ürettiğiniz, kullanıcı verisi içermeyen parçalarda kullanılmalıdır. Örneğin yorum kutusundaki bir metin doğrudan innerHTML'e yazılırsa <strong> yerine zararlı etiket de çalışabilir; bu yüzden kaçış ve textContent tercih edilir.

2. Olaylar ve Dinleme

Olay dinleyicisi element.addEventListener('olay', islev) biçiminde bağlanır. Yaygın olaylar: tıklamada click, alandan çıkıldığında change, klavyeyle basıldığında keydown, form gönderildiğinde submit ve fare alana geldiğinde mouseenter. Form gönderiminde event.preventDefault() çağrılmazsa sayfa yenilenir ve girilen değerler kaybolur; bu yüzden doğrulama yaptıktan sonra varsayılan davranış engellenir. Aynı olayda gereksiz bağlama olmaması için dinleyici yalnız bir kez eklenir, once: true seçeneği tek kullanım için uygundur.

3. Olay Delegation ve Dinamik Elemanlar

Listeye sonradan eklenen elemanların olayı yoktur; çünkü dinleyici eklendiği anda var olmayan elemana bağlanamaz. Çözüm, olayı en yakın sabit üstten (örneğin listeden) dinlemek ve event.target.closest('li') ile olayı başlatan en yakın öğeyi bulmaktır. Buna olay delegation denir: tek dinleyici binlerce satırı kapsar, bellek ve bakım avantajı sağlar. Sil düğmesine basınca satırın kimliği data-özniteliğinden okunur, eleman remove() ile kaldırılır ve liste yeniden çizilmeden güncellenir.

4. fetch ile Veri Alma ve Gönderme

fetch(adres) bir Promise döndürür; await ile yanıt beklenir. Kritik nokta şudur: ağ hatasında istek reddedilir, ancak sunucu 404 gibi bir durum kodu döndürdüğünde hata fırlatmaz; bu yüzden response.ok denetimi istemci tarafından yapılmalıdır. JSON gövdesi için response.json() ayrıca await edilir. POST isteğinde gövde başlıklarıyla birlikte JSON metni gönderilir:

fetch('/api/urunler', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(veri) })

Görsel akış şu sırayla kurulur: yükleniyor durumunu aç, isteği gönder, yanıtın ok olduğunu doğrula, veriyi çiz, hatada yakalayıcıya düş, finally ile yükleniyoryu kapat.

5. Sınav Odaklı Özet

Sınavda en sık üç nokta çıkar: preventDefault'ın form gönderiminde neden gerekli olduğu, delegation'ın dinamik eleman çözümü ve fetch'in 404'te hata fırlatmadığı gerçeği. Seçim sorularında querySelectorAll liste döndürürken getElementById tek eleman verdiği unutulmaz. Güvenlik sorusunda cevap daima kullanıcı verisini textContent ile yazmak ya da kaçış uygulamaktır.

Ne Öğreneceğiz

DOM üzerinde eleman seçme, olay dinleme, delegation ve fetch ile veri almayı kapsar. Bu konuda ögrenme çıktıları:

• 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.

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

• 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.

Basit Örnek ve Günlük Yaşam

Günlük yaşamda ve mesleki bağlamda bir uygulama:

Soru: Bir düğmeye her basıldığında sayaç bir artacak, sayı 10'u geçince sayaç kutusu kırmızı sınıfa girecektir. Akış nasıl kurulur?

1. Adım 1: Düğme ve sayaç metni querySelector ile seçilir.
2. Adım 2: click dinleyicisi eklenir, sayaç değişkeni bir artırılarak textContent'e yazılır.
3. Adım 3: Sayaç 10'u aşarsa classList.add ile uyarı sınıfı eklenir.
4. Adım 4: On birinci tıklamada sınıfın göründüğü tarayıcıda denenir.

Sonuç/cevap: Her tıklamada sayı artar; 10 sınırı geçildiğinde kutu kırmızı sınıfıyla vurgulanır.

Adım Adım Çözülmüş Örnek

Örnek 1: Tıklama Sayacı ve Sınıf Değişimi konusunun adımları:

1. Adım 1: Düğme ve sayaç metni querySelector ile seçilir.
2. Adım 2: click dinleyicisi eklenir, sayaç değişkeni bir artırılarak textContent'e yazılır.
3. Adım 3: Sayaç 10'u aşarsa classList.add ile uyarı sınıfı eklenir.
4. Adım 4: On birinci tıklamada sınıfın göründüğü tarayıcıda denenir.

Karşılaştırma Tablosu

Sık Yapılan Hatalar

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.

Kendini Dene

Soru: Yönerge: Yorum listesi bileşeni için tam DOM ve ağ akışı yaz. Akışta eleman seçmeyi, olay dinleyicisini bağlamayı, dinamik satırlar için olay devralmamayı (delegation), submit sırasında varsayılan davranışı engellemeyi, kullanıcı metnini güvenle çizmeyi ve fetch ile veriyi dört adımda çekmeyi göster; ardından bileşenin neden bellek dostu olduğunu bir paragrafla açıkla.

Örnek cevap: Puanlama anahtarı: eleman seçiminde querySelector kullanımının 2 puan; delegation ile tek dinleyici kullanılmasının ve closest ile satır bulunmasının yazılması 4 puan; preventDefault çağrısının yazılması 3 puan; textContent ile güvenli çizimin yazılması 3 puan; fetch dört adımının yazılması 4 puan; bellek dostu olma gerekçesinin (dinleyici sayısının sabit kalması, dinamik satırların tek dinleyiciyle kapsanması) yazılması 4 puan. Toplam 20 puan. Model cevap: Tek delegasyon dinleyicisi kullanılır, metin textContent ile çizilir, gönderim preventDefault ile durdurulur, veri istek-ok-JSON-çizim sırasıyla alınır; bu sayede bellek kullanımı sabit kalır.