DOM Nedir, Ne İşe Yarar?

Gelişen dünyayla beraber web geliştirme çalışmaları da vazgeçilmezlerden birisi. Modern dünyada web geliştirme çalışmaları büyük bir hızla devam ediyor. Bundan ötürü şimdilerde web, hemen her şeyin mümkün hale gelmesini sağlıyor. Yani aslında pek çok açıdan avantajlı konumda olmanıza yardımcı oluyor. Bir platform içerisinde sürdürülen çalışmaların tasarımı, işlevselliği gibi pek çok konuda web teknolojileri kullanılmaya devam ediliyor. Çalışmaların temelinde web sayfaları bulunuyor. Aynı zamanda web sayfalarının daha işlevsel olabilmesi konusunda HTML, JavaScript gibi teknolojilerden destek alınıyor. DOM yani Document Object Model de bunlardan biri olarak biliniyor. Bundan ötürü DOM nedir sorusu sıkça soruluyor.

DOM, “Document Object Model” kavramının kısaltması olarak kullanılmaya devam ediliyor. Web sayfalarının yapısını temsil ettiğini söylemek de mümkün. Aynı zamanda bir programlama arayüzü olarak da görülüyor. Document Object Model içerisinde web sayfalarının her türlü bileşeni kullanılıyor. Pek çok HTML elemanları da bu dosyalar içerisinde yer alıyor. Yani içerisinde resim, metin gibi farklı medya dosyalarını barındırıyor.

DOM web sayfasının yapısını bir düzen içerisinde bulabilmeyi sağlıyor. Yani aslında web sayfasının içeriğinin, özelliklerinin hiyerarşik bir düzenle kullanılmasında önemli bir etkisi bulunmaktadır. Sayfa içerisinde yer alan nesnelerin de pek çok örnekle gösterilmesi mümkündür. Web sayfaları içerisinde pek çok bileşene yer verildiği bilinmektedir. DOM sayesinde sayfa içerisinde değişim yapabilirsiniz. İçeriğin dinamik bir biçimde değiştirilmesinde etkin bir rolü bulunmaktadır. İçeriklerin özelliklerinin güncellenmesi, etkileşimli web uygulamalarının oluşturulması gibi pek çok konuda etkisinin olduğu bilinmektedir.

Document Object Model Neden Önemlidir?

DOM, web geliştiricileri için oldukça önemli olan araçlardan biri olarak görülmektedir. Çünkü web sayfasının davranışları, görünümü ve işlevselliği DOM ile kontrol altında tutulmaktadır. Web sayfalarının HTML yapısının anlaşılması konusunda da bir hayli faydalı olduğu bilinmektedir. Web geliştiricileri için bu denli önemli olmasının birden fazla etkeni bulunmaktadır. Sıralamak gerekirse de;

• DOM, web sayfasında bulunan içeriklerin değişebilmesini sağlamaktadır. Web geliştiricileri noktasında önemli geri dönütler sunmaktadır. Hatta web sayfa içeriğini değiştirebilmeniz, içerikleri daha farklı hale getirebilmeniz gibi fırsatlar sunmaktadır.
• Web sayfalarının nesnelerinin özelliklerine DOM sayesinde erişebilirsiniz. Aynı zamanda web sayfalarının özelliklerini değiştirebilmeniz noktasında büyük bir önemi olduğu bilinmektedir.
• DOM ile web sayfasında bulunan etkileşimli elemanların olaylarını yakalayabilirsiniz. Örneklendirmek gerekirse de aracı tıkandığı zaman bu olayı yakalamanız mümkündür. Böylece gerekli tıklama işlemlerini de kolaylıkla işlemeniz söz konusudur.
• Web sayfaları, web geliştiricileri tarafından kolayca yönetilebilmektedir. Web sayfasının düzenli bir yapısının olmasında önemli bir katkısı vardır. Ayrıca sayfa içerisindeki elemanların anlaşılması ve kolaylıkla yönetilebilmesi konusunda büyük bir katkısının olduğu anlaşılmaktadır.

Bu gibi daha birçok faktörden ötürü web geliştiricileri için DOM önemli bir avantajdır. Web sayfalarındaki performans iyileştirmelerinde önemli bir katkısının olduğu anlaşılmaktadır. Özellikle yeni dönemde trafiğin artması ve sektöre ayak uydurabilme konusunda ciddi fırsatlar var etmektedir.

DOM Nasıl Çalışır?

DOM, web sayfasının yapısını temsil eder. Bu yapı aslında bir düzen içerisindedir. Her bir HTML nesnesi ile etkili bir düzen elde edilmektedir. Ancak her bir düğüm içerisinde elemanların özellikleri, Parent Node düğümü bulunmaktadır. DOM yapısında, aslında HTML etiketleri temel alınmaktadır. Öncelikli olarak tarayıcı web sayfasının kaynak kodunu okumaktadır. Sonrasında DOM yapısı otomatik bir biçimde oluşturulmaktadır. Tarayıcı, HTML belgesinin tüm elemanlarını okumaktadır. Sonrasında bir DOM ağacı oluşturulmaktadır. Bu ağacın yapısı, HTML belgesinde bulunan tüm elemanların hiyerarşik bir yapı ile düzenlenmesini sağlamaktadır.

DOM kullanımıyla beraber etkinlikler, özellikler içerisinde çeşitli düzenlemeler yapılmaktadır. Örneklendirmek gerekirse de JavaScript fonksiyonu ile sınıf değişimi yapılabilmektedir. Var olan özelliklerin değerleri değiştirilebilir. DOM sadece etkileşimli olan sayfaların oluşturulmasında değil, düzen aşamasında da önemli bir yere sahiptir. Genel olarak nasıl bir çalışma düzeni olduğundan söz etmek gerekirse de DOM, bir ağaç yapısına sahiptir. Bu ağaç yapısı, bir web sayfasının yapısını yansıtmaktadır. Tarayıcı tarafınca otomatik bir biçimde düzenleme yapılmaktadır. DOM sayesinde bu yapıya erişmek, sayfa içeriğini düzenlemek mümkündür.

DOM Nedir? Document Object Model Katmanları Nelerdir?

DOM nedir sorusunun yanı sıra DOM katmanları da merak edilmektedir. Dom katmanları, web sayfasının yapısını temsil eden farklı düzeylerdir. Bu katmanlar, web sayfalarının içerisindeki nesnelerin sıralanışına göre oluşturulmaktadır. Var olan her bir katmansa, içerisindeki düzeyde bulunan elemanları temsil etmektedir. DOM katmanlarını sıralamak gerekirse de şu şekilde bilgilendirme yapmak mümkündür;

• Document, DOM katmanının en üst sayısı olarak görülmektedir. Bir web sayfasının içeriğini temsil ettiği bilinmektedir. Bu katman içerisinde tüm web sayfasında bulunan diğer katmanlar ana düğüm görevindedir.
• Element, HTML elemanlarını temsil etmektedir. Var olan her bir HTML elemanı, farklı bir element düğümüne karşılık gelmektedir.
• Text katmanı, web sayfasında bulunan metin içeriklerini yansıtmaktadır. Herhangi bir metin içeriği, TEXT düğümüne karşılık gelmektedir.
• Attribute katmanı, HTML elemanlarının özelliklerini temsil etmektedir. Örneklendirmek gerekirse de HTML resmin elemanının genişliği gibi var olan özellikler Attribute düğümleri tarafından temsil edilmektedir.
• Comment katmanı, web sayfasında bulunan yorumları temsil etmektedir. Bu yorumlar, Comment düğümleri tarafından temsil edilmektedir.

DOM okunduğu sırada JavaScript kullanılarak DOM API ile erişim sağlanmaktadır. Bu konuda örnek vermek gerekirse bir HTML elemanının özellikleri, metin içeriğinin değiştirilmesi, JavaCript koduyla ilgili DOM düğümleri ile erişim sağlanmaktadır. Bunun ardından özellikler ve içerikler değiştirilmektedir. Genel bir yorum yapılması gerekirse DOM katmanları, elemanların sıralanışına göre oluşturulmaktadır. Var olan her bir katman, oradaki elemanları temsil etmektedir.

DOM Nedir? Hakkında Bilinmesi Gerekenler Nelerdir?

DOM hakkında bilinmesi gereken pek çok bilgi ve kavram bulunmaktadır. Öncelikli olarak aktarmak gerekirse, DOM ile Kaynak Kodu arasında bazı farklılıklar vardır. Kaynak kodu ile DOM farklı yapıları temsil etmektedir. Çünkü kaynak kodu aslında bie web sayfasının orijinal kodu olarak geçmektedir. Web tarayıcı tarafından yorumlaması yapılmaktadır. Kaynak kodu ile web sayfasında bulunan bütün HTML, JavaScript kodu içerisine alınmaktadır. DOM web sayfası içerisinde bulunan her elemanı temsil etmektedir. Bu da elemanların özelliklerini, ebeveyn düğümlerini ve çocuk düğümlerini içermektedir.

Kaynak kodu kullanılarak bir web sayfasının orijinal kodu kullanılmaktadır. Kaynak kodunun değiştirilmesi halinde oluşan değişiklikler DOM içerisine yansımamaktadır. DOM kavramıysa web sayfasında bulunan değişikliklerin doğrudan yansıdığı programlama arayüzü olarak geçmektedir. DOM erişimi ile sayfa içeriğinin, özelliklerin değiştirilmesi söz konusudur. Kullanılan kavramlar, web sayfasının içeriğinin değiştirilmesinde önemli bir role sahiptir. DOM hakkında kullanılan kavramlarsa şu şekilde sıralanmaktadır;

• Node kavramı, web sayfasında bulunan elemanları temsil etmektedir. DOM ağacının her bir birimi Node olarak görülmektedir.
• İkinci kavram element olarak bilinmektedir. HTML belgesi içerisinde bulunan her bir etiket, Element Node olarak isimlendirilmektedir. DOM ağacında bulunan bir Node türü olarak geçer.
• DOM Manipülasyonu, web sayfasında bulunan elemanların JavaScript kullanımı ile beraber değiştirilmesi anlamına gelmektedir. Bu sayede web sayfası üzerindeki içeriklerin değiştirilmesi, uygulamaların oluşturulması amacıyla kullanıldığı anlaşılmaktadır.
• DOM API, web sayfasında bulunan elemanlara erişebilmek için kullanılmaktadır. JavaScript kullanımıyla beraber web sayfasında bulunan elemanların okunabilmesi, değiştirilmesi söz konusudur.
• Text Node, web sayfasında bulunan bir metin içeriğidir. Yani HTML paragraf elemanında bulunan metin içeriği Test Node olarak görülmektedir.