DOM (Document Object Model) Nedir?

DOM (Document Object Model) Nedir?​

DOM’u Tanıyalım​

Document Object Model kısaca DOM, web sayfalardaki verilerin ve yapıların bir nesne tabanlı modelidir. XML tabanlı markup dilleri için geliştirilmiş bu yapı karşımıza en çok HTML ile birlikte çıkıyor. DOM sayesinde Javascript gibi diller web sayfalardaki elemanlarla etkileşim kurarak web sayfaların ve web tasarımların daha dinamik hale getirilmesine olanaklar sağlıyor.

DOM herhangi bir programlama dili tarafından uyumlu bir şekilde kullanılabildiği için büyük avantajlar sağlar.

CSSOM (CSS Object Model) Nedir, Ne Değildir?​

DOM’dan farklı olarak CSS Object Model yanı kısaca CSSOM, XML dillerinin bir nesne tabanlı modeli olmamakla birlikte ağaç yapısı bir nevi DOM’u andırır. Fakat CSSOM web tasarımların makyajı olarak nitelendirilen CSS’in nesne boyutuna indirgenmiş halidir. DOM’dan farklı bir davranışına örnek vermek gerekirse web sayfa üzerinde herhangi bir görüntüsü oluşturulmayacak elemanlar CSSOM ağacına eklenmezken DOM ağacına eklenir.

DOM ve CSSOM Karşılaştırması​

Bir web tarayıcı yukarıdaki kod ile karşılaştığında her HTML elemanını DOM seviyelerine eklemesine rağmen h1 etiketi web sayfada gözükmeyeceği için CSSOM’a eklenmesine gerek yoktur. Çünkü daha önce de bahsettiğim gibi CSSOM’a ihtiyaç, görünürde bir şeyler olmaya başladığı zaman olur. Peki bu kodun DOM ve CSSOM karşılıklarına bakalım.

• DOM:
• html
• body
• h1
• webtasarim34.com
• CSSOM:
• html
• body

DOM Kaynak Kod Değildir!​

DOM, web sayfaların kaynak kodlarının (HTML) daha basit bir hale indirgenmiş bir görüntüsü olduğunu anlatmıştım. Bazen her ne kadar DOM ve web sayfaların kaynak kodları birbirinin aynısı gibi gözükse de temelinde herhangi bir benzerlik mevcut değildir.

Web Tarayıcılardaki Öğeyi Denetle Seçeneği​

​

​

Herhangi bir web tarayıcıda F12’ye basarsanız ya da sağ tık yapıp karşınıza çıkan seçeneklerden Inspect Element (Öğeyi Denetle) kısmına tıklarsanız genellikle web tarayıcının sağ tarafında belirmek üzere bir pencerenin açıldığını göreceksiniz. Önünüze birçok farklı seçenek gelecek ama biz burada Elements (Öğeler) bölümünü inceleyeceğiz. Fark ettiyseniz karşınıza HTML ve Javascript hatta bazı CSS kodlarının çıktığını göreceksiniz. Javascript kodları genellikle soluk renklidir. Peki bu gördüğünüz DOM’un kendisi mi?

(Örnekte kullanılacak web tarayıcılardan dolayı öğeyi denetle seçecekleri değişkenlik gösterebilir.)



DOM’un yapısına baktığımızda karşımıza sadece HTML elemanları çıkması gerekiyordu, bizim CSS ve Javascript ile ne alakamız olacak ki dediğiniz an karşınızda görüyor olduğunuz yazıların aslında kaynak kodların sadeleştirilmiş bir biçimi olduğunu rahatlıkla anlayacaksınız. Normalde HTML kodlaması yapılırken bile ::before, ::after gibi ifadeleri görmüyorken burada karşımıza çıkıyor. İşte bu CSS’in bazı selector ya da bir başka deyişle seçici olarak adlandırılan ifadelerinden kaynaklanmaktadır. Bu ifadeler pseudocode (Sahte Kod) olarak da adlandırılır. Sonuç olarak “öğeyi denetle” bize DOM hakkında önemli bilgiler veriyor fakat DOM’un aslını görmüyoruz.

Sor Bakalım​

1. Dünya Çapında Hangi DOM standartları mevcuttur?​

   Modern web tarayıcılar W3C DOM ve WHATWG DOM standartlarını kullanmanın yanı sıra ekstradan kendi bünyelerinde tanımladıkları standartları da kullanır.