Belge Nesne Modeli (DOM), geliştiricilerin JavaScript gibi kodlama dillerini kullanarak web belgeleriyle etkileşimde bulunmasına olanak tanıyan hayati bir arayüzdür. HTML veya XML gibi bir web belgesinin içeriğinin ağaç benzeri bir yapı olarak yapılandırılmış, hiyerarşik ve mantıksal bir görünümünü temsil eder.
Belge Nesnesi Modelinin (DOM) Doğuşu
DOM kavramı ilk olarak 1990'ların ortasından sonuna kadar daha etkileşimli web içeriğine izin verme ihtiyacının bir sonucu olarak ortaya çıktı. Dinamik web sitelerinin ortaya çıkışı ve JavaScript'in yaygınlaşmasıyla birlikte, komut dosyalarının belge yapısını, stilini ve içeriğini değiştirmesine izin veren bir modele ihtiyaç duyuldu. World Wide Web Konsorsiyumu (W3C), bu amaç için standartlaştırılmış bir API oluşturma görevini üstlendi ve bunun sonucunda DOM'un geliştirilmesi sağlandı.
İlk standart DOM düzeyi, DOM Düzeyi 1, 1998 yılında W3C tarafından tanıtıldı. Belgenin herhangi bir bölümünü değiştirme araçları da dahil olmak üzere, bir HTML veya XML belgesinin tamamı için kapsamlı bir model sağladı.
Belge Nesne Modelini (DOM) Genişletme
DOM aslında programların ve komut dosyalarının bir belgenin içeriğine, yapısına ve stiline dinamik olarak erişmesine ve bunları güncellemesine olanak tanıyan, dilden bağımsız bir platform ve arayüzdür.
DOM, her biri belgenin öğeler, nitelikler ve metin gibi bir bölümünü temsil eden bir düğüm hiyerarşisi halinde düzenlenir. Bu mantıksal ağaç yapısı, belge içeriğinde gezinmeyi ve içeriği değiştirmeyi kolaylaştırır.
Bir web belgesi, hepsinin özellikleri ve yöntemleri olan ve başka nesneleri içerebilen bir nesne ağacı olarak modellenir. Örneğin, bir HTML belgesi "body", "div", "span" ve "p" gibi öğelerin yanı sıra bunların niteliklerini ve metin içeriğini temsil eden nesnelere dönüştürülür.
Belge Nesne Modeli (DOM) Nasıl Çalışır?
DOM'un iç yapısı bir düğüm ağacı şeklinde düzenlenmiştir. En üstteki düğüm Document belgenin tamamını temsil eden düğüm. Bunun altında, Element düğümler sayfadaki HTML öğelerine karşılık gelir, Attribute düğümler elemanların niteliklerini tutar ve Text düğümler öğelerin metin içeriğini tutar.
Bu hiyerarşik yapı, geliştiricilerin belge ağacında gezinmesine ve düğümleri seçmek, oluşturmak, değiştirmek veya silmek için API yöntemlerini kullanmasına olanak tanır.
Aşağıda bir HTML belgesinin DOM ağacı olarak nasıl görüneceğine ilişkin bir örnek verilmiştir:
matematikDocument
↳ Element: html
↳ Element: head
↳ Element: title
↳ Text: "Title of the Document"
↳ Element: body
↳ Element: h1
↳ Text: "Hello, world!"
↳ Element: p
↳ Text: "This is a paragraph."
Belge Nesne Modelinin (DOM) Temel Özellikleri
-
Ağaç Yapısı: DOM, gezinmeyi, seçimi ve manipülasyonu basit ve sezgisel hale getiren mantıksal bir ağaç yapısındaki bir belgeyi temsil eder.
-
Dil Tarafsız: DOM herhangi bir programlama diline bağlı değildir. HTML, XML ve diğer belge türlerindeki nesneleri temsil etmek ve bunlarla etkileşimde bulunmak için kullanılan bir kuraldır.
-
Dinamik Erişim ve Güncelleme: DOM, programların bir belgenin içeriğine, yapısına ve stiline dinamik olarak erişmesine ve bunları güncellemesine olanak tanır.
-
Standartlaştırılmış: DOM, farklı tarayıcılar ve platformlar arasında yaygın kabul görmesini ve uyumluluğunu sağlayan bir W3C standardıdır.
Belge Nesne Modeli Türleri (DOM)
DOM spesifikasyonu, her biri bir öncekine özellikler ve işlevsellik ekleyen çeşitli "düzeylere" ve "modüllere" bölünmüştür. Anahtar türleri şunları içerir:
| DOM Düzeyi/Türü | Kısa açıklama |
|---|---|
| DOM Seviye 1 | Öğeleri ve bunların niteliklerini değiştirmeye yönelik yöntemler de dahil olmak üzere, HTML veya XML belgelerinin tamamı için temel bir model sağlandı. |
| DOM Seviye 2 | Ad alanı işleme, CSS'yi destekleyen bir stil modülü ve tablolar, olaylar vb. ile ilgilenmek için birkaç yeni arayüz gibi özellikler eklendi. |
| DOM Seviye 3 | XPath ve klavye olay yönetimi desteği eklendi, belgeleri yüklemek ve kaydetmek için arayüzler tanıtıldı. |
| DOM Seviye 4 | Bağımlılıkları azaltarak çekirdek DOM basitleştirildi, eşzamansız işlemler için vaatler getirildi ve daha kolay düğüm manipülasyonu için ebeveyn özellikleri gibi daha fazla özellik eklendi. |
Belge Nesne Modelini (DOM) Kullanma
DOM, bir web sayfası JavaScript kullanılarak değiştirildiğinde her zaman kullanılır. Çok sayıda web teknolojisinin temel API'sidir.
Geliştiriciler, bir web sayfasının görünüşünü, hissini ve içeriğini, tam sayfanın yeniden yüklenmesine gerek kalmadan dinamik olarak değiştirmek için DOM'yi kullanır, böylece etkileşimli ve hızlı yanıt veren kullanıcı arayüzlerine olanak tanır.
Gücüne rağmen DOM'un sorunları da yok değil. Özellikle büyük veya karmaşık web dokümanlarında dikkatli kullanılmazsa yavaşlayabilir. Kötü optimize edilmiş DOM manipülasyonu, sayfaların yavaş oluşturulmasına ve arayüzlerin yanıt vermemesine neden olabilir. Bu sorunu çözmek için geliştiriciler genellikle verimli DOM manipülasyonu için daha yüksek düzey API'ler sunan jQuery, React veya Vue.js gibi kitaplıkları veya çerçeveleri kullanır.
DOM Özellikleri ve Benzer Terimlerle Karşılaştırma
| Terim | Tanım | Karşılaştırmak |
|---|---|---|
| DOM | HTML ve XML belgeleri için, belgenin yapısal bir temsilini sağlayan ve geliştiricilerin belgenin içeriğini ve görsel sunumunu değiştirmesine olanak tanıyan bir API. | |
| CSSOM | CSS Nesne Modeli (CSSOM), DOM'a benzeyen ancak özellikle CSS için olan CSS stillerinin bir haritasıdır. DOM'a uygulanan stil sayfalarının ve stillerin değiştirilmesine olanak tanır. | DOM belge yapısına odaklanırken CSSOM sunum katmanına odaklanır. |
| Gölge DOM | Web Bileşenlerinin uygulanması için DOM ağacının bölümlerini kapsülleyen bir mekanizma. DOM'un bazı kısımlarını ana belge ağacından "gizlemek" için izole eder. | Normal DOM'dan farklı olarak Shadow DOM, stil ve davranış kapsüllemesi sağlar. |
Belge Nesne Modeli (DOM) ile İlgili Gelecek Perspektifleri
Web teknolojileri gelişmeye devam ettikçe DOM API'nin de genişleyip gelişmesi muhtemeldir. Gelecekteki potansiyel gelişmeler arasında DOM'u manipüle etmenin daha etkili yöntemleri, ortaya çıkan web standartlarıyla gelişmiş entegrasyon ve HTML spesifikasyonunun devam eden gelişimi yer alıyor.
Devam eden ilginç bir gelişme, yeniden kullanılabilir, kapsüllenmiş HTML etiketlerinin oluşturulmasına olanak tanıyan Web Bileşenlerinin giderek artan bir şekilde benimsenmesidir. Bu, DOM öğelerinin kapsüllenmesine yönelik bir yöntem sağlayan Shadow DOM ile yakından bağlantılıdır.
Belge Nesne Modeli (DOM) ve Proxy Sunucuları
Proxy sunucusu, istemci ile sunucu arasında istekleri ve yanıtları ileten bir aracıdır. DOM öncelikle istemci tarafındaki web belgelerinin yapısı ve manipülasyonuyla ilgilenirken, proxy sunucular ağ düzeyinde çalışır.
Ancak ikisinin kesişimi, bir proxy sunucusunun bir web belgesinin içeriğini değiştirebileceği senaryolarda bulunabilir. Örneğin, bir proxy sunucusu, istemciye ulaşmadan önce bir web sayfasındaki DOM öğelerini ekleyebilir, kaldırabilir veya değiştirebilir. Bu, komut dosyalarının enjekte edilmesi, istenmeyen öğelerin kaldırılması veya yerelleştirme veya özelleştirme amacıyla içeriğin değiştirilmesi gibi çeşitli nedenlerle kullanılabilir.
İlgili Bağlantılar
- MDN Web Dokümanları: Belge Nesne Modeli (DOM)
- W3C DOM Standardı
- JavaScript Bilgisi: DOM
- Google Web'in Temelleri: Tarayıcılar Nasıl Çalışır?
Bu genel bakış, Belge Nesne Modeli'nin (DOM), kökeninin, nasıl çalıştığının, özelliklerinin ve nasıl gelişeceğinin kapsamlı bir şekilde anlaşılmasını sağlamalıdır. DOM, etkileşimli web geliştirmenin temel taşı olmayı sürdürüyor ve web teknolojileri ilerledikçe kritik bir rol oynamaya devam edecek.
