Dom Nedir? Document Object Model Nasıl Çalışır?

Document Object Model (DOM), bir belgenin yapısını nesnelerden oluşan bir ağaç olarak temsil eden, web belgeleri için bir programlama arayüzüdür. HTML ve XML içeriğiyle dinamik olarak etkileşime izin vererek web geliştiricilerinin bir web sitesi içeriğini, yapısını ve şeklini anında değiştirmesine olanak tanır.

Peki DOM nedir, ne işe yarar?

Dom Ne Demek?

DOM (Document Object Model) veya Belge Nesne Modeli, web geliştirmede önemli bir bileşendir. Web sayfalarının bir ağaç olarak yapılandırılmış bir temsilini sağlayan web belgeleri için bir programlama arayüzüdür.

DOM, bir belgenin yapısını düğümlerden oluşan bir ağaç olarak temsil eder; burada her düğüm belgenin bir bölümüne (örneğin, bir öğe, nitelik veya metin) karşılık gelir. Bu model, JavaScript gibi programlama dillerinin web sayfalarının içeriğini, yapısını ve stilini değiştirmesine olanak tanır.

Bu yaklaşım sayesinde web sayfalarının içeriği, yapısı ve düzeni, komut dosyaları ve programlar tarafından dinamik olarak erişilebilir ve güncellenebilir. Web sayfaları ve komut dosyaları arasında bir köprü görevi gören DOM, belge öğelerinin etkileşimini ve işlenmesini kolaylaştırır.

Document Object Model nedir sorusunun cevabını detaylı olarak anlattıktan sonra bir sonraki bölümde Document Object Model’in çalışma mantığı ile ilgili detaylara değineceğiz.

Document Object Model (DOM) Nasıl Çalışır?

DOM, dinamik web uygulamaları için olmazsa olmazdır. Web sayfalarının içeriği, yapıyı ve stili, sayfayı yeniden yüklemeye gerek kalmadan dinamik olarak değiştirmesini sağlar. Bu etkileşim, modern web uygulamalarının merkezinde yer alır ve DOM'u  front-end web geliştirmenin temel taşı haline getirir.

Peki Document Object Model nasıl çalışır?

• Ağaç Yapısı: DOM, bir belgeyi düğüm ağacı olarak düzenler. Her düğüm, bir öğe, öznitelik veya metin parçası gibi belgenin bir bölümünü temsil eder.
• Düğümler: DOM'daki öğeler düğümler olarak temsil edilir. Bunlar, belgenin kendisinden (belge düğümü) öğelere (öğe düğümleri), metne (metin düğümleri), yorumlara (yorum düğümleri) ve daha fazlasına kadar her şeyi içerir.
• Manipülasyon: Geliştiriciler, DOM'u manipüle etmek için JavaScript gibi programlama dillerini kullanabilir. Bu, öğeleri ve öznitelikleri eklemeyi, kaldırmayı veya değiştirmeyi, stilleri değiştirmeyi ve kullanıcı olaylarına yanıt vermeyi içerir.

Dom Nasıl Kullanılır?

DOM, web sayfalarındaki içerik ve yapıyı dinamik olarak değiştirmek için kullanılır. JavaScript aracılığıyla HTML öğeleri eklemek, kaldırmak, güncellemek ve stillerini değiştirmek mümkündür. Ayrıca, kullanıcı etkileşimlerine yanıt vermek için olay dinleyicileri eklenerek sayfanın daha interaktif hale gelmesi sağlanır. Bu sayede DOM, modern web uygulamalarında temel bir rol oynar.

Dom Nasıl Oluşur? 

DOM, bir web sayfasının yapılandırılmış temsili olarak tarayıcı tarafından oluşturulan bir ağaç yapısıdır. Bir HTML veya XML belgesi yüklendiğinde, tarayıcı bu belgeyi analiz eder ve aşağıdaki adımları takip ederek DOM'u oluşturur:

• HTML Ayrıştırma (Parsing): Tarayıcı, HTML kodunu satır satır okur ve belgeyi analiz eder. Etiketler, metinler ve diğer öğeler incelenerek DOM'un temeli atılır.
• DOM Ağacı Oluşturma: HTML belgelerindeki her öğe bir düğüm (node) olarak temsil edilir. Tarayıcı, bu düğümleri hiyerarşik bir ağaç yapısı halinde düzenler.
• CSSOM (CSS Object Model) ile Birleşme: CSS dosyaları ve iç stil tanımlamaları ayrıştırılarak CSSOM oluşturulur. CSSOM ve DOM birleşerek render ağacı oluşturulur.
• Render ve Boyama: Render ağacı kullanılarak sayfa, ekranda görüntülenebilir hale getirilir. Tarayıcı, öğeleri konumlandırır ve stillerini uygular.

Bu süreç sayesinde web sayfaları dinamik olarak yönetilebilir ve JavaScript kullanılarak DOM üzerinde değişiklikler yapılabilir.

HTML, CSS ve JavaScript’in DOM ile ilişkisi  

HTML, web sayfasının temel yapısını oluştururken, CSS stil ve düzenlemeleri uygular ve JavaScript ise dinamik değişiklikler yaparak DOM’u etkileşimli hale getirir. Bu üç teknoloji birlikte çalışarak kullanıcı deneyimini zenginleştirir ve sayfanın içeriğinin anlık olarak güncellenmesini sağlar.

HTML ve XML

DOM, HTML veya XML belgelerinden oluşturulur. Bir HTML belgesinde, <div>, <span> ve <a> gibi etiketler öğe düğümleri haline gelirken, bu etiketler içindeki metin, metin düğümleri haline gelir. Sınıf ve kimlik gibi nitelikler, nitelik düğümlerine dönüşür.

JavaScript

JavaScript, DOM ile etkileşim kurmak için kullanılan en yaygın dildir. React.js, Vue.js ve Angular gibi kitaplıklar ve çerçeveler, DOM'u işlemek için daha soyut yöntemler sunarak geliştirme süreçlerini kolaylaştırır.

CSS

DOM, belgeyi biçimlendirmek için CSS ile arayüz oluşturur. Geliştiriciler, DOM öğelerinin stil özelliğini değiştirerek veya öğelere uygulanan CSS sınıflarını değiştirerek stilleri dinamik olarak güncelleyebilir.

Web Geliştirmede DOM (Document Object Model) Rolü Nedir?

• Etkileşimli ve Dinamik İçerik: İçeriği dinamik olarak düzenleme ve güncelleme yeteneği, DOM'u modern web geliştirmenin temel taşı haline getirir. Bu da daha ilgi çekici ve etkileşimli kullanıcı deneyimlerine yol açar.
• Esneklik ve Kontrol: Geliştiriciler, web sayfalarının içeriği ve sunumu üzerinde ayrıntılı kontrole sahiptir. Bu esneklik, karmaşık ve son derece duyarlı web uygulamalarının oluşturulmasına olanak tanır.
• Modern Web Çerçeveleri için Temel: React.js, Vue.js ve Angular gibi modern çerçeveler, işlev görmek için DOM'a güvenir. Bu teknolojileri etkili bir şekilde kullanmak için DOM'u anlamak çok önemlidir.
• Gelişmiş Performans: Eşzamanlı Yükleme ve Tembel Yükleme gibi teknikler, web sayfası yükleme sürelerini hızlandırmak ve performansı iyileştirmek için DOM manipülasyonundan yararlanır.
• SEO ve Analitik: DOM'un uygun şekilde manipüle edilmesi, Arama Motoru Optimizasyonu'na (SEO) yardımcı olabilir ve içeriğin arama motorları tarafından keşfedilebilir ve dizine eklenebilir olmasını sağlar. Web analitiği araçları ayrıca kullanıcı etkileşimlerini izlemek ve veri toplamak için DOM ile etkileşime girer.

Virtual Dom Nedir? Geleneksel DOM ile Farkları  

Virtual DOM (Sanal DOM), React gibi modern framework'lerde kullanılan ve gerçek DOM'un güncellenme performansını önemli ölçüde artıran çok önemli bir kavramdır. Bir React bileşeninde durum değişikliği meydana geldiğinde, React gerçek DOM'u doğrudan güncellemek yerine Virtual DOM olarak bilinen DOM'un hafif bir kopyasını oluşturur.

React daha sonra gerçek DOM'a uygulanması gereken değişiklikleri belirlemek için güncellenmiş Virtual DOM'u bir öncekiyle karşılaştırır. Değişiklikler belirlendikten sonra React gerçek DOM'u optimize edilmiş ve verimli bir şekilde günceller, böylece gereksiz yeniden oluşturmaları azaltır ve genel performansı artırır.

DOM ile Sanal DOM arasındaki temel fark, DOM'un bir web sayfasının gerçek HTML yapısını temsil etmesi, Sanal DOM'un ise React tarafından gerçek DOM'u güncellerken performansı artırmak için kullanılan DOM'un hafif bir kopyası olmasıdır.

Virtual Dom Nasıl Çalışır? 

JSX kullanarak bir React bileşeni yazdığınızda, bu JSX tarayıcı tarafından doğrudan anlaşılmaz. Bunun yerine, transpilasyon adı verilen bir işlemle React öğelerine dönüştürülür. Bu React öğeleri daha sonra sanal DOM'u oluşturur. Sanal DOM ayarlandıktan sonra React bunu gerçek DOM'a işler ve bileşenlerinin web sayfasında canlanmasını sağlar.

React bileşenleri genellikle kullanıcı girdileri veya bir API'den alınan yeni bilgiler gibi zamanla değişebilen verilere güvenir. Bu tür veriler değiştiğinde, ilişkili React öğelerinin güncellenmesi gerekir. Gerçek DOM'u hemen değiştirmek yerine React yeni bir sanal DOM ağacı oluşturur. Ardından, bu yeni sanal DOM'u "Uzlaştırma" adı verilen bir işlemle geçerli olanla karşılaştırır.

DOM Boyutu Nasıl Küçültülür? 

DOM optimizasyonu, web sitesi performansını ve genel kullanıcı deneyimini geliştirmek için kritik öneme sahiptir. Çünkü aşırı sayıda öğe ve iç içe geçmiş düğümlerle karakterize edilen bir DOM, tarayıcıdan daha fazla işlem gücü talep eder. Bu, daha yavaş sayfa yükleme süreleri ve hem kullanıcı memnuniyetini hem de SEO sıralamalarını olumsuz etkiler. Ayrıca, arama motorları hızlı ve verimli web sitelerine öncelik verir, bu da akıcı bir DOM'un sitenizin görünürlüğünü ve sıralamasını önemli ölçüde artırabileceği anlamına gelir.

Gereksiz HTML Etiketlerini Kaldırın 

DOM boyutunu küçültmek için en önemli stratejilerden biri, web sayfalarınızın HTML yapısını basitleştirmektir. Bu, gereksiz öğeleri ve etiketleri kaldırarak yapılabilir. Bunu yaparak, DOM'un genel boyutunu azaltabilirsiniz. Bu, web sitelerinin daha iyi performans göstermesine ve daha hızlı yüklenmesine yol açabilir.

Bir diğer yaklaşım ise, içeriğin anlamını ve yapısını iletmek için uygun etiketleri kullanmaya odaklanan semantik HTML kullanmaktır.

<header>, <article> ve <footer> gibi etiketler semantik HTML etiketleridir. İçerdikleri içeriğin rolünü belirtirler. <div> ve <b> gibi etiketler semantik olmayan HTML öğelerine örnektir.

Semantik HTML, basitleştirilmiş bir web sayfası oluşturmaya yardımcı olabilecek düzenli bir DOM oluşturmaya yardımcı olur.

CSS Optimize Edin 

Kullanılmayan CSS de DOM'unuzun boyutuna katkıda bulunabilir. Bu yüzden DOM boyutunuzu azaltmak için web sitenizden kullanılmayan tüm CSS'leri kaldırmanız gerekir. Web sitenizden kullanılmayan CSS'leri kaldırmak için WP Rocket veya Perfmatters gibi araçları kullanabilirsiniz.

HTML Şablonları Kullanın 

HTML şablonları, tekrarlayan öğeleri dinamik olarak yükleyerek DOM yapısını sadeleştirir. Gereksiz kod tekrarlarını ortadan kaldırarak sayfanın daha hızlı yüklenmesine yardımcı olur. Özellikle büyük ve karmaşık web sitelerinde bileşen bazlı bir yapı oluşturarak DOM’un büyümesini önler. Bu yöntem, hem kodun okunabilirliğini artırır hem de performansı iyileştirir.

CMS Tabanlı Sitelerde DOM'U Optimize Edin (Wordpress)

WordPress kullanıcıları için DOM boyutunu yönetmek, tema ve eklenti seçimlerine titizlikle dikkat etmenin yanı sıra özenli içerik optimizasyonu gerektirir. Önceden tasarlanmış birçok tema ve eklenti, DOM’un aşırı yüklenmesine katkıda bulunan ve böylece web sitesi yükleme süresini optimize etme yeteneğinizi etkileyen gereksiz öğeler ekleme eğilimindedir. Hafif ve iyi kodlanmış temaları ve eklentileri tercih ederek DOM'un karmaşıklığını en aza indirebilirsiniz. Ayrıca, sayfalarınızdaki eski veya gereksiz öğeleri, komut dosyalarını ve stil sayfalarını temizlemek DOM boyutunu daha da küçültecektir.

• Tema ve Şablonları Optimize Etme: İyi kodlanmış ve hafif temalar seçerek başlayın. DOM'unuza gereksiz öğeler ekledikleri için çok sayıda ek özellik veya karmaşık biçimlendirme ile gelen temalardan kaçının. İstenmeyen öğeleri kaldırmak için temanızı özelleştirmek DOM boyutunu daha da azaltabilir.
• Hafif Eklentiler Kullanma: WordPress sitenize yüklenen eklentilerde seçici olun. Bazı eklentiler DOM'unuza önemli sayıda ek öğe ekleyebilir. Bu yüzden sayfanızın yapısını aşırı karmaşıklaştırmadan işi yapan hafif eklentiler seçin.
• Harici Komut Dosyalarını En Aza İndirme: JavaScript ve CSS dosyaları dahil olmak üzere harici komut dosyaları DOM’un aşırı yüklenmesine katkıda bulunabilir. Bu yüzden her komut dosyasının gerekliliğini değerlendirin ve gereksiz olanları ortadan kaldırın. Mümkün olduğunda, tarayıcı tarafından yapılan istek sayısını azaltmak için komut dosyalarını birleştirin.
• Tembel Yüklemeyi Kullanma: Tembel yükleme, kritik olmayan öğelerin yüklenmesini ihtiyaç duyulana kadar erteleyerek sayfa yükleme sürelerini iyileştirmek için etkili bir tekniktir. Bu yüzden ilk DOM boyutunu önemli ölçüde azaltmak ve performansı iyileştirmek için resimler ve videolar için tembel yüklemeyi uygulayın. Çoğu modern WordPress önbelleğe alma eklentisi, yapılandırılması kolay yerleşik tembel yükleme özelliklerine sahiptir.