Tag Archives: Document Object Model

Document Object Model (DOM) Nedir?

18 Kas

Document Object Model (DOM), hem HTML hem de XML için bir uygulama arabirimidir(API). DOM Türkçe’de Belge Nesne Modeli olarak adlandırılabilir.

DOM tüm sayfayı, düğüm hiyerarşisinden oluşan bir belge olarak oluşturur. Bir HTML veya XML sayfasının her bölümü bir düğümden türetilmiştir. Bu düğümlerin her biri ayrı birer nesnedir.

<html>
   <head>
      <title>E-Ticaret</title>
   </head>
   <body>
      <h1>Kategoriler</h1>
   </body>
</html>

Bu kod, DOM kullanılarak bir düğüm hiyerarşisi olarak aşağıdaki şekilde çizilebilir. Bir web sayfası yüklendiğinde, internet tarayıcısı(Chrome, IE, Mozilla, vs) sayfanın DOM modelini oluşturur.

DOM yapısı, bir belgeyi temsil eden ağaç yapısını oluşturarak, geliştiricilere belgenin yapısı üzerinde kolay bir denetim yapabilmelerini sağlar. Hangi nesnenin hangi nesneye bağlı olduğu kolay bir şekilde öğrenilebilir. Ağaçtaki düğümler DOM API sayesinde kaldırılabilir veya ağaca yeni bir düğüm eklenebilir.

DOM ve Javascript İlişkisi

DOM JavaScript’e özgü değildir ve aslında pek çok başka dilde uygulanabildiğidir. Ancak Web tarayıcıları için DOM, ECMAScript kullanılarak uygulanmıştır ve artık JavaScript dilinin büyük bir bölümünü oluşturmaktadır. Javascript DOM ile dinamik HTML oluşturmak için daha etkili işlemler yapabilmektedir.

  • Sayfadaki tüm HTML öğelerini ve HTML attribute değerlerini değiştirebilir.
  • Sayfadaki tüm CSS stillerini değiştirebilir.
  • Mevcut HTML öğelerini ve özniteliklerini kaldırabilir.
  • Yeni HTML öğeleri ve öznitelikleri ekleyebilir.
  • Sayfadaki mevcut tüm HTML olaylarına yanıt verebilir.
  • Sayfada yeni HTML elementi ekleyebilir.

DOM Neden Gerekli Hale Gelmiştir?

Web uygulamalarının yaygınlaşmaya başladığı yıllarda Internet Explorer 4.0 ve Netscape Navigator 4.0 ile birlikte, geliştiriciler ilk kez bir Web sayfasının görünümünü ve içeriğini sayfayı yeniden yüklemeden değiştirebilir hale gelmişlerdi. DHTML (Dynamic HTML) doğmuştur. Bu olay web teknolojisinde adeta yeni bir sayfa açmıştı. Fakat yeni bir sorunu da beraberinde getiriyordu. Microsoft ve Netscape gibi ticari firmalar DHTML’yi geliştirme sürecinde kendi yollarından gittiler. Böylece Web geliştiricilerinin herhangi bir Web tarayıcısı tarafından çalıştırılabilen tek bir HTML sayfası yazabildikleri dönemi sona erdirdiler. Buradaki tehlike, Microsoft ve Netscape firmalarının önüne geçilmediği taktirde Web’in iki gruba bölünecek olmasıydı.

Web’in platform bağımsız doğasını korumak için bir adım atıldı. Web standartları oluşturmakla görevli olan World Wide Web Consortium (W3C), DOM üzerinde çalışmaları başlatmıştır. DOM W3C trafından üç bölümde oluşturulmuştur.

  • DOM Core
  • DOM XML
  • DOM HML

DOM zamana bağlı olarak seviyeler halinde gelişim göstermiştir.

DOM Level 1

1998 yılında W3C tarafından tavsiye edilmiştir tek amacı belgenin yapısını oluşturmaktır. İki modülden oluşur.

  • DOM Core: Bir belgenin herhangi bir bölümüne kolayca erişmeyi ve belgede düzenleme yapmayı sağlar.
  • DOM HTML: DOM Core genişletilerek HTML’e özgü nesneler ve yöntemler eklenmiş halidir.

DOM Level 2

Bu seviyede DOM’a fare ve kullanıcı arabirimi olayları(events) ve stil sayfaları yanında yeni modüller eklendi.

  • DOM Views: Belgenin CSS Stil’den önce ve CSS Stil’den sonraki görünümlerini izlemek için arayüzleri tanımlar.
  • DOM Events: Olaylar için arayüzleri tanımlar.
  • DOM Style: CSS tabanlı stilleri yönetmek için arayüzleri tanımlar.
  • DOM Traversal and Range – bir belge ağacında gezinmek ve düzenleme yapmak için arayüzleri tanımlar.

DOM Level 3

Bu seviyede, belgeleri tek tip bir şekilde yükleme ve kaydetme yöntemlerinin yanı sıra bir belgeyi doğrulama yöntemleri DOM’a eklenmiştir.

Kaynaklar
  • Professional JavaScript for Web Developers 3rd Edition, Nicholas C. Zakas
  • https://www.w3schools.com/js/js_htmldom.asp