DOM ve Olaylar

Bilişim Teknolojileri · 11. Sınıf · JavaScript ve DOM

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. Seçim document.querySelector ile ilk eşleşen, document.querySelectorAll ile tüm…

DOM ve Olaylar Kazanımları

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.

Örnek Sorular ve Çözümleri

Örnek Soru 1 kolay

querySelectorAll ile getElementById arasındaki temel fark nedir?

A) İkisi de yalnız etiket adıyla arar
B) İkisi de tek eleman döndürür
C) İlk birden çok eleman, ikincisi tek eleman döndürür
D) İlk id ile, ikincisi sınıf ile çalışır

Doğru cevap: C) İlk birden çok eleman, ikincisi tek eleman döndürür

querySelectorAll tüm eşleşenleri liste olarak döndürür; getElementById verilen id'ye uyan tek elemanı verir.

Örnek Soru 2 orta

fetch ile alınan yanıtta durum kodu 404 ise ilk yapılması gereken nedir?

A) Hemen json() çağırmak
B) response.ok denetleyip hata üretmek
C) İsteği tekrar göndermek
D) Yanısı HTML'e yazmak

Doğru cevap: B) response.ok denetleyip hata üretmek

fetch HTTP hatalarında reddolmez; ok false ise status koduna göre hata oluşturulmalı, ancak ondan sonra gövde okunmalıdır.

Örnek Soru 3 zor

event.target.closest('li') ifadesinin amacı nedir?

A) Listeyi oluşturmak
B) Olayı başlatan elemandan geriye doğru ilk li'yi bulmak
C) Tüm li'leri silmek
D) Olayı iptal etmek

Doğru cevap: B) Olayı başlatan elemandan geriye doğru ilk li'yi bulmak

Delegation'da tıklanan düğmeden geriye doğru en yakın li satırı bulunur; böylece hangi satırda işlem yapılacağı belirlenir.

Konu Anlatımının Tamamı

DOM ve Olaylar konu anlatımını açÇözümlü örnekler, formüller, ipuçları ve tüm sorular · 11. Sınıf Bilişim Teknolojileri

Bu sayfa DOM ve Olaylar konusu için hazırlanmış kısa bir özetdir. Tam içerik için ders sayfasını açabilir, DersTeders ana sayfasından diğer konulara geçebilirsin.