DOM, HTML ve XML yapıdaki belgelerin hiyerarşik yapısını gösteren bir kılavuzdur. “Document Object Model” kelimelerinin baş harfleriyle oluşan DOM, Türkçe olarak “Belge Nesne Modeli” olarak ifade edilir. Bu model, yazılım dillerinin belgelere erişmesini ve değişiklik yapmasını sağlayan bir arabirimdir.

DOM Nedir?

DOM, belgenin içeriğini belirli bir düzen içerisinde nesne olarak temsil edilmesini sağlayan bir modeldir. Bu modelde belge yapısında bulunan her bir nesne için bir düğüm bulunur. Alt düğümler kök bir düğüme bağlanır. Belge ile iletişim kuran servis düğümü çözerek işlemlerini gerçekleştirir. Örneğin, bir WEB API servisi, XML dosyadan veri çekerken bu modele göre belgeye erişir.

İnternet tarayıcısı bir web sayfasını açarken sunucuya ilk isteği gönderir ve sayfaya ait belge yükler. Belgedeki nesneleri düğümlerden çözerek hiyerarşiye göre sayfa içerisine yerleştirir ve site açılmış olur. Web sayfasına dışardan erişim sağlayan tüm servisler bu şekilde kolaylıkla belgenin mantıksal yapısına ulaşır ve sayfada değişiklik yapabilir.

DOM Yapısı Nedir?

DOM yapısı nesnelerden oluşan bir yapıdır. Bir çeşit alt-üst ilişkisi bulunan soyağacı gibidir. Ana nesne altında birbirinden farklı alt nesneler, alt nesnelerin altında da hiyerarşik yapıda nesnelerden oluşur.

DOM Yapısı Nedir?

DOM yapısını bir de HTML kodu üzerinden inceleyelim.

<!doctype html>
<html>
 <head>
   <title>Başlık</title>
   <metacharset="karakter seti">
 </head>
 <body>
    <h1>Alt başlık</h1>
    <p>Paragraf</p>
  </body>
</html>

HTML’de her bir açılan ve kapanan bölüm arasında kalan bölüm DOM yapısı içerisinde bir nesne oluşturur. Bu durumu görselleştirmek istersek aşağıdaki gibi bir yapı ortaya çıkar.

d
C[O8Å
أ»
لملe9
IAIH
C[Y3H
إ).
١)

DOM yapısı, HTML ve XML sayfaların nesne olarak modellenmesi diye ifade edilebilir. Javascript, Python gibi yazılım dillerinin bu model sayesinde HTML ve XML sayfalarına erişim sağlarlar ve gerektiğinde sayfalarda değişiklik yapabilirler. 

DOM ile Javascript İlişkisi

DOM Javascript dışında farklı programlama dilleri ile de uyumludur. Bununla birlikte dinamik HTML sayfa kullanımında Javascript yaygın olarak karşımıza çıkar. Özellikle internet tarayıcılarında dinamik HTML oluşturmak için tercih edilir. DOM ile Javascript ilişkisi sayesinde aşağıdaki işlemler daha kolay ve etkili bir şekilde yapılabilmektedir:

  • HTML ögelerini ve değerlerini değiştirmek
  • CSS stillerini değiştirmek
  • HTML ögelerini ve değerlerini silmek
  • Olmayan HTML ögeler ve değerler eklemek
  • Sayfada HTML olarak yanıt vermek
  • Yeni HTML bölümü eklemek

DOM Kaynak Kod mu?

DOM yapısı incelendiğinde sanki websitesine ait kodları içeriyor gibi algılanabilir. Öncelikle DOM kaynak kod değildir. DOM nesne modelleme ile kodların daha anlaşılır hale gelmesini sağlayan bir arabirim standardıdır. Bu standart, W3C (World Wide Web Consoritum) ve WHATWG (The Web Hypertext Application Technology Working Group) tarafından belirlenmektedir. İnternet tarayıcıları bu standartları kullanır.

DOM Bölümleri Nelerdir?

DOM yapısını belirleyen W3C (World Wide Web Consortium) otoritesi belirlediği standarda göre DOM üç bölümden oluşmaktadır.

  • DOM Core: DOM yapısının çekirdeğini oluşturur ve standart kullanımda olan bir modeldir.
  • DOM XML: Sadece XML belgelerinde kullanılan bir modeldir.
  • DOM HMTL: Sadece HTML belgelerinde kullanılan bir modeldir.

DOM standardı belirli seviyelerden geçerek günümüze kadar gelişim göstermiştir.

DOM Level 1

W3C otoritesi DOM standardını ilk defa 1998 yılında belirlemiştir. Bu kapsamda DOM Core ve DOM HTML modellerini ortaya koymuştur. Ek olarak bazı sınırlamalar getirmiştir:

  • İç alt küme ve dış alt küme için bir nesne modeli
  • Doğrulama
  • Stil dosyaları ile belge oluşturma kontrolü
  • Giriş kontrolü
  • Akış güvenliği

DOM Level 2

2000 yılında standartlaşan bu kısımda arabirim yönetimi üzerinden nesne modellemesi sağlandı. getElementById() gibi metodlar eklendi. Bu sayede CSS gibi stil yapılarının öncesini ve sonrasını görme imkanı sunuldu. Ayrıca olay yönetimi, belge ağacında gezinme gibi modüller eklendi.

DOM Level 3

Bu seviyede belgeleri tek türde yükleme standardı getirilirken doğrulama yöntemleri modernize edildi. Xpath ve klavye olay işleme desteği eklendi.

DOM ile İlgili Temel Kavramlar Nelerdir?

DOM ile ilgili araştırma yapanların sıkça karşısına çıkan temel kavramlar şu şekildedir:

  • Belge: HTML veya XML ile hazırlanan sayfanın tamamı belge adıyla tanımlanır.
  • Nesne: HTML veya XML ile hazırlanan sayfanın içeriğini oluşturan ögeler nesne adıyla tanımlanır.
  • Çağrılmak: Bir belge içerisindeki kod dizisinin DOM yapısına göre hiyerarşik bir biçimde istenmesi olayına verilen bir tanımdır.
  • Düğüm Ağacı (Node Tree): Belge içerisindeki nesnelerin hiyerarşik yapı içerisinde birbirlerine bağlandığı yapıdır.
  • Düğüm (Node): Her bir nesnenin düğüm ağacına bağlanmak için oluşturduğu noktadır.
  • Element: Düğüm içerisinde yer alana kod dizeleridir.
  • Öznitelik (Attribute): DOM yapısında erişimi sağlayan nesnelerin özniteliklerini tanımlayan kısımlardır.
  • Öge Dizin (Named Node Map): Nesnelerin özniteliklerine göre belirli bir  hiyerarşik sıralaması olmadan listelendiği dizine verilen addır. Bu dizinde yapılan değişiklik sayfada otomatik olarak yansır.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir