DOM (Document Object Model) Nedir, Ne İşe Yarar?

tarihinde gönderilmiş tarafından

DOM Nedir?

DOM, HTML ve XML belgelerinin hiyerarşik düzenini tanımlayan yapısal bir modeldir. Belgedeki tüm içerikler, bu modelde nesne olarak temsil edilir. Her nesneye karşılık gelen bir düğüm bulunur ve alt düğümler doğrudan kök düğüme bağlanır. Dolayısıyla belgelerle etkileşime giren sistemler, bu düğümleri çözümleyerek işlemleri gerçekleştirir. Örneğin, WEB API servisleri XML dosyalarından veri alırken DOM yapısına göre belgeye erişim sağlarlar.

Tarayıcı, web sayfası açılırken fiziksel veya sanal sunucuya isteği gönderir ve belgeyi yükler. Belgede yer alan tüm nesneleri hiyerarşik sıraya göre düğümler üzerinden çözümler ve sayfa içeriğini oluşturur. Web sayfalarına dış sistemler tarafından erişim sağlandığında da aynı yapı kullanılır. Böylece belgelerin mantıksal düzenine ulaşılır ve içerik üzerinde doğrudan değişiklik yapılır.

DOM Sitenin Kaynak Kodu Mudur?

DOM yapısı incelendiğinde kaynak kodla aynıymış gibi görünse de aslında kaynak kod değildir. DOM, belge kodlarını nesne temelli bir model aracılığıyla daha düzenli ve erişilebilir hale getiren arabirim standardıdır. Bu modelin kuralları W3C (World Wide Web Consortium) ve WHATWG (The Web Hypertext Application Technology Working Group) tarafından tanımlanır. Tarayıcılar bu standartları kullanarak belge yapısını oluşturur ve kullanıcıya sunar.

DOM Nasıl Çalışır?

Türkçe adıyla Belge Nesne Modeli (DOM), JavaScript ile tarayıcı arasında iletişim katmanı görevi görür. Tarayıcı tarafından oluşturulan HTML belgeleri üzerinde işlemler DOM modeli aracılığıyla gerçekleştirilir. Ayrca, JavaScript, DOM yapısını kullanarak öğe oluşturma, değiştirme, silme, stil ve sınıf tanımlama, öznitelik ayarlama gibi işlemleri yürütür ve olayları gözlemleyip bunlara tepki verir.

DOM’un Temel Özellikleri              

DOM’un temel özellikleri aşağıdaki şekilde sıralanmaktadır:

  • Hiyerarşik (Ağaç) Yapı: DOM, belgeyi kök düğümden (genellikle <html>) başlayarak dallanan bir ağaç yapısı şeklinde temsil eder. Her HTML etiketi, metin veya yorum bir düğüm (node) olarak kabul edilir.
  • Nesne Tabanlı Temsil: DOM, her HTML elemanını bir nesne (object) olarak tanımlar. Bu sayede programlama dilleri (özellikle JavaScript) ile bu nesneler üzerinde işlem yapılabilir.
  • Dinamik Güncellenebilirlik: DOM üzerinden HTML veya CSS yapısı çalışma anında (runtime) değiştirilebilir. Örneğin, JavaScript ile sayfa içeriği, stilleri veya yapısı kullanıcı etkileşimine göre anında güncellenebilir.
  • Platform ve Dil Bağımsızlığı: DOM, belirli bir programlama diline bağlı değildir. JavaScript, Python, Java veya C# gibi dillerle kullanılabilir.
  • Olay Tabanlı Yapı (Event Driven): DOM, kullanıcı etkileşimleri için olay nesneleri oluşturur ve bu olaylar üzerinden işlevler tetiklenebilir.
  • Standartlaştırılmış Yapı: DOM, W3C (World Wide Web Consortium) tarafından tanımlanan ve farklı tarayıcılar arasında tutarlılık sağlayan bir standarttır.

DOM’un Yapısı Nasıldır?

Document Object Model (DOM), herhangi HTML veya XML belgesinin yapısını hiyerarşik bir ağaç biçiminde temsil eder. Temel DOM yapısı sayesinde her öğe, belge içinde belirli bir konuma ve ilişkiye sahiptir. Türkiye’nin en güvenilir web hosting sağlayıcılarından olan MarkaHost adresi olarak DOM’un temel yapı elemanlarını sizler için aşağıdaki şekilde sıralamaktayız:

Document Nesnesi

Document nesnesi, DOM’un en üst düzey öğesidir ve tüm belgenin kökünü temsil eder. Dolayısıyla tarayıcı, HTML dosyası yüklendiğinde bu nesneyi otomatik olarak oluşturur ve nesne üzerinden sayfanın tamamına erişim mümkündür. Örneğin, document.getElementById() veya document.querySelector() gibi metotlar, belge içindeki öğelere ulaşmak için kullanılır. Document nesnesi ayrıca sayfa başlığına, formlara, bağlantılara ve medya içeriklerine de erişim sağlar.

Elementler ve Etiketler

DOM’daki elementler, HTML etiketlerinin nesneye dönüştürülmüş halidir ve her HTML etiketi, DOM’da bir Element Node olarak temsil edilir. Örneğin <div>, <p> veya <img> etiketleri DOM içinde ayrı elementler olarak bulunur. Ayrıca elementler üzerinde JavaScript kullanarak içerik değişikliği, stil güncellemesi veya yeni öğe ekleme işlemleri de yapılabilir.

Ek olarak her element, kendine özgü özellikler (properties) ve metotlar (methods) içerir. Örneğin element.innerHTML veya element.style gibi ifadeler bu özelliklerin değiştirilmesinde kullanılır.

Nodelar (Düğümler)

DOM yapısının temelini nodelar (düğümler) oluşturur ve her belge, farklı türlerde düğümlerden meydana gelir. En yaygın düğüm türleri ise aşağıdakilerdir:

  • Element Node: HTML etiketlerini temsil eder.
  • Text Node: Etiketler arasındaki metin içeriklerini barındırır.
  • Attribute Node: Etiketlerin sahip olduğu nitelikleri temsil eder.
  • Comment Node: HTML içindeki yorum satırlarını ifade eder.

Diğer bir ifadeyle tüm düğümler, birbiriyle DOM’un hiyerarşik yapısını oluşturan ebeveyn (parent) ve çocuk (child) ilişkisi içindedir.

Attribute’lar

Attribute’lar, HTML etiketlerinin özelliklerini tanımlayan değerlerdir. Örneğin <img src=”resim.jpg” alt=”örnek”> etiketinde “src” ve “alt” birer attribute’tur. Ayrıca DOM üzerinde her attribute bir node olarak ele alınabilir ve JavaScript ile erişilip değiştirilebilir.

Örneğin:

document.getElementById(“resim”).setAttribute(“alt”, “Yeni açıklama”);

Text İçerikleri

Text içerikleri, DOM yapısında Text Node olarak temsil edilir ve HTML etiketleri arasındaki metinleri ifade eder. Her HTML elementi, içerdiği metin bilgisini bir alt düğüm (child node) olarak barındırır.

DOM Ne İşe Yarar?

DOM, web geliştiricilerine web sayfalarının yapısı ve işleyişi üzerinde tam kontrol sağlar. Sağladığı temel avantajlar aşağıdaki şekildedir.

  • Web sayfası içeriği değiştirilebilir: DOM modeli JavaScript kullanarak web sayfasındaki tüm elemanlara erişim sağlar. Geliştiriciler, kullanıcıdan gelen geri bildirimlere göre sayfa içeriğini dinamik biçimde güncelleyebilir, öğelerin özelliklerini değiştirebilir ve etkileşimli uygulamalar oluşturabilir.
  • Web sayfası özellikleri düzenlenebilir: Model, sayfadaki elemanların niteliklerine doğrudan erişim imkanı da sunar. JavaScript fonksiyonları aracılığıyla öğenin sınıfı, stili veya özellik değeri değiştirilebilir, böylece sayfanın görünümü ve işlevselliği anlık olarak güncellenir.
  • Kullanıcı etkileşimleri izlenebilir: DOM, web sayfalarındaki etkileşimli öğelerin olaylarını algılar ve işlenmesini sağlar. Geliştirici, örneğin bir butonun tıklanma olayını yakalayarak bu olaya karşı belirli işlemleri gerçekleştirebilir. Dolayısıyla bu mekanizma sayesinde kullanıcı ile sayfa arasındaki etkileşim sürekli hale gelir.
  • Sayfa yapısı yönetilebilir: DOM, web sayfasındaki tüm elemanların hiyerarşik düzenini tanımlar ve geliştiricilerin sayfadaki bileşenleri kolay biçimde anlamasını ve yönetmesini sağlar. Her düğümün konumu açıkça tanımlandığı için sayfa yapısı üzerinde düzenli bir kontrol elde edilir.
  • Performans geliştirilebilir: Sayfa performansı, DOM işlemlerinin verimli biçimde yürütülmesiyle doğrudan ilişkilidir. Geliştiriciler, gereksiz yeniden çizimleri önleyen teknikler kullanarak DOM manipülasyonlarını optimize eder ve sayfa performansını artırır.

DOM ile HTML ve CSS İlişkisi

HTML öğelerini düğümler olarak tanımlayan DOM, CSS ile sayfanın stil ve düzen bilgilerinin işlendiği ayrı model olan CSSOM (CSS Nesne Modeli) ile birlikte çalışır. DOM, HTML içeriğinin hiyerarşik yapısını sağlarken, CSSOM stil özelliklerini taşır ve bu iki model render ağacını oluşturur. Böylece tarayıcı, sayfanın içeriğini ve görünümünü bir arada yönetebilir. 

DOM ile JavaScript İlişkisi

DOM ile JavaScript ilişkisi ise DOM’un JavaScript tarafından web sayfasındaki öğelere erişim, manipülasyon ve dinamik değişiklikler yapılmasını sağlayan temel yapı olmasıdır. JavaScript, DOM üzerinde HTML elementlerini değiştirebilir, silebilir, yeni öğeler ekleyebilir, CSS stillerini değiştirebilir veya HTML içeriğini güncelleyebilir. DOM, JavaScript’in gücünün temel kaynağıdır ve modern web uygulamalarında React, Vue ve Angular gibi kütüphaneler de DOM etkileşimini soyutlayarak geliştiricilere kolaylık sağlar. 

DOM ile Sanal DOM (Virtual DOM) Arasındaki Farklar

Belge Nesne Modeli (DOM), web belgeleri için programlama arayüzü işlevi görür ve HTML yapısını temsil eder. Ayrıca JavaScript aracılığıyla erişim ve düzenleme imkanı sunar. Web sayfası yüklendiğinde ise tarayıcı, sayfadaki tüm HTML öğelerinden oluşan bir DOM ağacı oluşturur.

Sanal DOM ise React gibi gelişmiş modern çerçevelerde kullanılan ve DOM güncellemelerinin performansını artıran hafif yapıdır. React bileşenlerinde durum değişikliği oluştuğunda, doğrudan gerçek DOM güncellenmez. Bunun yerine DOM’un hafif bir kopyası olan Sanal DOM oluşturulur. 

Güncellenen Sanal DOM, önceki sürümüyle karşılaştırılır ve yalnızca gerekli değişiklikler gerçek DOM’a uygulanır. Doğal olarak bu yöntem, gereksiz yeniden işlemleri azaltır ve uygulamanın genel performansını artırır.

DOM ve Sanal DOM arasındaki temel farklar aşağıdaki şekilde açıklanabilir:

  • Uygulama Hızı: Gerçek DOM güncellemeleri büyük ve karmaşık uygulamalarda yavaş gerçekleşebilir. Sanal DOM, değişiklikleri optimize ederek gerçek DOM’a verimli biçimde uygular ve uygulamanın hızlı ve akıcı çalışmasını sağlar.
  • Bellek Kullanımı: DOM, büyük sayfalarda yüksek miktarda bellek tüketir. Sanal DOM ise hafif yapısı sayesinde bellek kullanımını azaltır ve performansı artırır.
  • Durum Yönetimi: DOM, yerleşik durum yönetimi sunmaz, durum değişiklikleri manuel olarak takip edilmelidir. Sanal DOM’da ise güncellemeleri otomatik ve düzenli olarak yansır.
  • Yeniden Kullanılabilirlik: Sanal DOM, birden fazla bileşen için kullanılabilir ve uygulamanın durum yönetimini ve güncellemelerini kolaylaştırır. DOM ise her web sayfasına özgüdür ve farklı bileşenler arasında tekrar kullanılamaz.