İnternet dünyasında yer alan tarayıcılar, her web sitesini bir belge olarak tanımlar. Bu belge içinde (Web sitesinde) bulunan tüm dökümanlar da nesne olarak kabul edilir. Sitelerde kullanılan resim, metin, formlar gibi tüm araçlar, nesne tanımının içerisinde girmektedir. DOM kısaca, belge nesnesi modeli anlamına gelmektedir. 

DOM (Document Object Model), internet teknolojisinde kullanılan HTML (HyperText Markup Language) Hiper Metin İşaretleme Dili  ve XML (EXtensible Markup Language) Genişletilebilir İşaretleme Dili gibi belgelerin, tüm programlama dilleriyle ya da script dosyalarıyla iletişim kurmasını sağlayan bir arabirim aracıdır. Programlama dillerinde yaygın olarak kullanılan OO (Object Oriented) yaklaşımı da DOM yapısına benzetilmektedir. Web sitelerinin HTML sayfalarında yer alan DOM nesneleri aşağıdaki şekilde sıralanmaktadır;

  • <head> gizleme etiketi
  • <body> belgenin gövdesini tanımlama etiketi
  • <title> başlık etiketi
  • <h>hiyerarşik olarak başlıklara eklenen HTML etiketleri
  • <style> stil bilgi etiketi
  • <section> sayfa bölüm etiketi
  • <p> paragraf etiketi

Yukarıda sıralanan tüm etiketler, DOM nesneleri kapsamına girer. DOM kullanım amacı, HTML ya da XML araçları ile script dillerinin iletişim kurarak, etkileşimli web siteleri oluşturulmasını sağlamaktır. DOM aracı, Javascript, PHP, ASP (Active Server Page) gibi birçok yazılım diline destek vermektedir.

DOM Yapısı ve DOM Metotları

DOM, Türkçe açılımı ile Doküman Nesne Modeli, internet sitelerinde yer alan dokümanlara erişmeyi sağlayan araçtır. DOM aynı zamanda W3C standartlarından biridir. W3C, web sitelerini belirlenmiş kalite standartlarına taşımayı hedefleyen W3C (World Wide Web Consortium) yani Dünya Çapında Ağ Konsersuyumu olarak bilinmektedir. W3C Birliğinin tanımladığı standartlar ise “W3C Standartları” olarak adlandırılmaktadır. DOM, bu standartları uygulayan arabirim aracına verilen isimdir. DOM aracının yapısı genel olarak ağaca benzetilmektedir. DOM ağacının en tepesinde HTML etiketleri yer almaktadır. Sonrasında hiyerarşik olarak diğer etiketler sıralanmaktadır. Bu açıklama “DOM Nedir HTML” sorusuna da yanıt vermektedir.

DOM özet olarak HTML yapıları için kullanılmakta olan doküman nesne modelidir. HTML DOM metotları, elementler üzerinde uygulanan tüm eylemleri kapsayan kavramdır. DOM, HTML öğelerini, elementlere erişmek için metotlar halinde kullanır. HTML yapısına yeni elementler ekleme, bu elementleri değiştirme ya da silme işlemlerinde DOM aracından yararlanılır. HTML DOM özellikleri, elementlerin değiştirilebildiği ve ayarlanabildiği değerler olarak ifade edilmektedir. “DOM Nedir?” sorusuna ise HTML DOM özelliklerine, Javascript üzerinden erişim sağlandığı belirterek cevap verebiliriz.

DOM Bölümleri Nelerdir?

İnternet üzerinden erişilen tüm web sitelerinde yer alan bilgileri ve belgeleri, oluşturulan kod yapıları temsil etmektedir. DOM, açılımı ile belge nesne modeli ise web ekosisteminde yer alan belgelerin standart edilmiş yapılarının ve içeriklerinin temsili olarak gösterilmektedir. Seçili web sitesinde, programlama dilleri ile bağlantı kurulması ve bağlantının ardından belgeler üzerinde değişiklikler yapılması yine DOM aracı ile gerçekleştirilmektedir. Bu bilgi “DOM Nedir?” sorusunu da açıklamaktadır. DOM aynı zamanda bir W3C standardı olduğu için, bu standart aracılığı ile komut dosyalarına ve programlama dillerine kolayca erişim sağlayabilmektedir. DOM’un bu erişim özelliği, nesnelerin üzerinde güncellenebilir değişiklikler yapmayı da beraberinde getirmektedir. Yazılım dillerinden bağımsız şekilde depolanmış olan veriler, DOM API’leri (Application Programming Interface) Uygulama Programlama Arayüzü aracılığıyla belgelerin yaratılmasını desteklemektedir. Bu şekilde üzerinde çalışılan belgelerin içerikleri ve yapıları, programlama dilleri ile kolay ve hızlı bir şekilde değiştirilmektedir. 

Gerçekleştirilen işlem akışı “DOM api nedir?” sorusuna da yanıt veriyor. Geliştiricilerin kullanmış olduğu DOM bölümleri ise 3’e ayrılmaktadır. 

Bunlar;

  • Çekirdek DOM Bölümü (Core DOM): Tüm belge türlerinde kullanımı mümkün olan, standart yapıdaki DOM modelini ifade eder.
  • XML DOM Bölümü: Sadece XML belgelerinde kullanılan DOM modelidir.
  • HTML DOM Bölümü: Tüm HTML belgelerinde kullanılabilen DOM modeli bölümüdür.

DOM Temel Kavramları Nelerdir?

DOM içeriklerini tanımlarken, belge, nesne gibi kavramlarla karşılaşılır. Bu kavramlar bazen karışıklığa neden oluyor. DOM çalışma prensiplerini daha iyi anlayabilmek için oluşturulmuş olan temel DOM kavramları aşağıdaki şekilde açıklanabilir;

Belge Kavramı

Doküman nesne modeli olan DOM’da belge kavramı, HTML kodlarla hazırlanmış olan web sayfasını ifade eder.

Nesne Kavramı

DOM içerisinde sık kullanılan nesne kavramı ise HTML kod ile oluşturulmuş olan web sayfalarında yer alan elemanların her birini işaret etmektedir.

Çağrılma Kavramı

Sayfalarda bulunan kod parçaları üzerinde belirtilen komutun aktifleştirilmesi için DOM ağacında yer alan nesneler, hiyerarşik sıralama ile çağrılmalıdır. Sıralamada ilk önce dökümanlar, sonra “Root elementleri”, ardından ise element yer alır. Çağrılma kavramı, öğelerin işlevlerini yerini getirmesi için aktifleştirilmesi gerektiği anlamına gelmektedir.

DOM Düğüm Ağacı Kavramı

Bu kavram, DOM yapısının hiyerarşik olarak belgeleri ve nesneleri birbirine bağlamış olduğu yapıyı göstermektedir. DOM Node Tree olarak da adlandırılan kavram, yapı içerisinde yer alan tüm düğümleri (node) birbirine bağlamaktadır. Birbirine bağlanan düğümler ise dökümanlar, doküman tipleri, elementler, metinler gibi tüm nesneleri ifade eder. DOM düğüm ağacının her düğümünde alt öğeler de bulunur. Alt öğeler, hiyerarşik yapı içerisinde erişilebilen alanları ayırmakla görevlidir.

DOM Metotları Kavramı

DOM aracılığıyla yürütülen tüm işlemlere DOM metodu adı verilir. Örnek olarak; HTML öğelerinin üzerinde gerçekleştirilen tüm işlemler, ayrı bir metot olarak gösterilir.

DOM Nasıl Kullanılır?

DOM, web sayfalarının yapılandırılmış hiyerarşik düzende temsil edilmesinin en kolay ve işlevsel yoludur. DOM işlem akışında, belge nesneleri aracılığıyla sağlanmış olan komutlar ya da yöntemler kullanılmaktadır. Bu yöntemlerle etiket, kimlik, sınıf ya da öğelere kolayca erişmekte ve üzerinde değişiklik yapılabilmektedir. DOM internet dünyasında 4 farklı şekilde kullanılıyor.

Bunlar;

  • Statik DOM Kullanımı: Önce bir DOM ağacı oluşturulur ve HTML etiketleri yardımıyla sayfa üzerinde tasarım gerçekleştirilir.
  • Etkileşimli Web Sayfası Oluşturma: Etkileşimli (İnteraktif) web sitesi oluşturma işlemleri DOM API aracılığıyla yürütmektedir. DOM API, DOM ağacında yer alan HTML öğelerinin kontrol edilmesi ve yönetilmesini, form verilerinin güncellenmesini, 2 boyutlu resimlere erişim ile düzenleme yapılmasını sağlamak amacıyla kullanılmaktadır.
  • Javascript Üzerinden DOM Erişimi ve Güncellemeler: Javascript üzerinden, DOM dökümanları içerisinde yer alan çalışılacak öğeye ulaşılmaktadır. HTML öğelerinin ataması ve güncellemeleri bu sistem ile gerçekleştirilmektedir.
  • JQuery Üzerinden DOM Erişimi: JQuery kullanımında yaşanan sorunlar ve uyumsuzluklar DOM API ile düzenlenmiştir. JQuery üzerinden DOM API aracılığıyla öğelere erişim sağlanabilmekte, yönetim ve güncelleme işlemleri yapılmaktadır.

DOM Yapısında Bulunan Temel Veri Türleri Nelerdir?

DOM yapısında yer alan farklı veri türleri bulunmaktadır. Tüm temel verilerin, farklı bileşenleri temsil edebilir hale gelmesi için DOM aracından yararlanılmaktadır. DOM temel veri türleri ise aşağıdaki şekilde sıralanmaktadır;

Dökümanlar (Document)

Belge nesnesi olarak ifade edilen kavram, web sayfasının kendisidir. DOM ağacı, HTML sayfasında bulunan bir elemente erişim sağlamak için, işlemlerini belge nesnesinde yürütmektedir. Web tarayıcısına yüklenen HTML belgesi, otomatik şekilde doküman (Document) haline getirilmektedir. DOM API de yer alan nesne, belge niteliğinde olduğu zaman, doküman kaynak düğümüne bağlı olarak kullanılabilmektedir.

Düğüm (Node)

Düğüm, bilgisayar ağı içerisinde, başka birimlerle iletişime geçme yeteneğine sahip olan yönlendirici özellikte elektronik birimdir. DOM yapısında yer alan belgelerde bulunan nesneler düğüm (Node) olarak ifade edilir. DOM içerisine yeni bir öğe eklemek için, o öğeye ait bir düğüm (Node) oluşturmak gerekmektedir. HTML belgelerinde, her nesne bir düğüm olarak DOM ağacında yer almaktadır. 

Element

Node’lara bağlı olarak işlem gerçekleştiren öğeler element olarak tanımlanmaktadır. Elementler, DOM API komutları ile döndürülebilir özelliktedir. CSS kullanımı ile tüm elementlere sınıf eklemek de mümkündür. Javascript kullanımı ile elementler arasında etkileşim kurulmakta ve düzenleme yapılmaktadır.

Düğüm Listesi (NodeList)

Belgeler içerisinde yer alan düğümlerin bir arada olduğu liste, düğüm listesi olarak ifade edilir. HTML koleksiyon ve düğüm listesi veri kavramları birbirine karıştırılmakta çünkü her ikisi de aynı görevi yürütmektedir. Düğüm listesinde bulunan tüm öğelere, index tarafından “List” komutları aracılığıyla erişilir.

Öznitelik (Attribute)

DOM yapısında yer alan özniteliklerin her biri DOM düğümleri olarak tanımlanmaktadır.

Öğe Dizini (Named Node Map)

Öğe dizininde yer alan öğelerin her biri Attr nesnelerini içerisinde barındıran dizinlerdir. Bu dizin içerisinde, nesnelerin hiyerarşik sıralama ile dizilmesi gerekmez. Buna rağmen nesnelere dizin aracılığıyla erişim sağlanabilir. Öğe dizini (Named Node Map) nesnesinde değişiklik yapıldığı anda, yapı otomatik olarak güncellenmektedir.