DOM Ne Demek?

DOM ne demek?

DOM, İngilizce "Document Object Model" ifadesinin kısaltmasıdır ve Türkçede belge nesne modeli diye çevrilir. Tarayıcı bir HTML dosyasını yüklediğinde onu düz metin olarak bırakmaz. Her etiketi bir nesneye dönüştürür ve bunları iç içe geçmiş bir ağaç hâlinde bellekte tutar.

Bu ağacın en üstünde document nesnesi vardır. Altında html, onun altında head ve body, onların altında da başlıklar, paragraflar ve düğmeler yer alır. Her öğe bir "düğüm" (node) olarak adlandırılır.

JavaScript DOM'u nasıl kullanır?

JavaScript, sayfayı değiştirmek için doğrudan HTML dosyasına değil DOM'a erişir. document.querySelector("#sepet") ile bir öğeyi bulur, metnini ya da stilini değiştirir, yeni öğe ekler veya siler.

Örneğin bir haber sitesinde "Daha fazla yükle" düğmesine bastığınızı düşünün. JavaScript sunucudan yeni haberleri alır ve her biri için DOM'a yeni bir kart ekler. Sayfa yenilenmeden liste uzar. Tıklama, kaydırma ve klavye gibi olaylar da DOM öğelerine bağlanan dinleyicilerle yakalanır.

Performans açısından dikkat

DOM'da yapılan her değişiklik, tarayıcının sayfanın bir kısmını yeniden hesaplayıp çizmesine yol açabilir. Bir döngü içinde yüzlerce öğeyi tek tek eklemek sayfayı yavaşlatır.

Değişiklikleri toplu yapmak bu sorunu azaltır. React gibi kütüphanelerin kullandığı sanal DOM da tam olarak bu amaçla, gerçek DOM'a yalnız gereken değişiklikleri yansıtmak için geliştirilmiştir.