DOM Nedir?

DOM Nedir?

DOM (Document Object Model), bir web sayfasındaki HTML etiketlerini tarayıcının programatik olarak erişebildiği düğümlerden oluşan bir ağaç haline getirir. Başlık, buton, form alanı veya liste öğesi bu ağaçta birer node olarak temsil edilir.

Nasıl Çalışır?

Tarayıcı HTML’i parse eder, DOM ağacını üretir ve CSSOM ile birleştirerek render sürecine sokar. JavaScript bu ağaca querySelector, addEventListener, classList veya appendChild gibi API’lerle erişir. Bir butona tıklandığında metin değiştirmek, form hatası göstermek veya yeni satır eklemek DOM manipülasyonudur.

DOM canlı bir yapıdır. Kod bir öğenin stilini veya içeriğini değiştirdiğinde tarayıcı yeniden hesaplama, layout ve paint adımlarını çalıştırabilir. Çok sık ve plansız DOM güncellemesi performans sorunlarına yol açabilir.

DOM ile İlgili Kavramlar

• Node: DOM ağacındaki her bir öğe, metin veya yorum noktası
• Element: HTML etiketiyle temsil edilen node türü
• Event: Tıklama, input, submit gibi kullanıcı veya sistem olayları
• Shadow DOM: Web component’lerde kapsüllenmiş DOM alanı

İş Dünyasında Kullanımı

Form doğrulama, sepet arayüzü, filtreleme, modal, canlı bildirim ve yönetim paneli etkileşimleri DOM üzerinden görünür hale gelir. React ve Vue gibi kütüphaneler doğrudan DOM’u elle yönetmeyi azaltır; Virtual DOM gibi yaklaşımlar değişiklikleri hesaplayıp gerçek DOM’a daha kontrollü uygular.