DOM Nedir? Ne İşe Yarar?

İnternet sitenizde veri ve belgeleri temsil eden güçlü kod yapıları mevcuttur. Document Object Model, DOM’un açılımıdır. Belge nesne modeli Türkçe karşılığıdır.

İnternet sitenizde veri ve belgeleri temsil eden güçlü kod yapıları mevcuttur. Document Object Model, DOM’un açılımıdır. Belge nesne modeli Türkçe karşılığıdır.
İnternet camiasında olan herhangi bir belgenin standart edilmiş halini temsil etmektedir. Sizlere bu yazıda DOM ne demek ve DOM nedir? Sorularına cevap verip, detaylı bilgiler paylaşacağız.

DOM Nedir?

İnternet sitelerinin programlama dilleriyle bağlantı kurabilmesi için ve bu bağlantılardan hemen sonra belgeler üzerinden değişiklik yapılabilmesi gerekir.
Programlama dillerinin internet sitesine bağlanabilmesi adına HTML ve XML belge düğümler ve nesnelerle birlikte tutulabilmesi adına, standart bir hale getirilmiş modellerle saklanması ve böylelikle bağlantı kurulabilmesi gerekiyor.
DOM kullanıldığı zaman, herhangi bir programlama arabirimi, nesnelerle uygulanması gerekir. Böylelikle internet sitesine programlama dilleri ulaşabilir ve bu ulaşımın ardından programlar, belge yapıları ya da tarzları içerikleri değiştirebilmektedir. Bu bilgiler dom ne demek ve dom nedir sorularına cevap niteliği taşımaktadır.
Adı geçen bu belgelerin ne olduğu hakkında soruları duyar gibiyim. Örnek olarak; İnternet siteleri belgedir. HTML koduyla tasarlanan bu bölgeler çoğunlukla tarayıcıda bir sayfa olarak görülmektedir.
Çoğu zamansa bir HTML kaynağı olarak, iki farklı görünümde internet sitesi aynı belge niteliğindedir ve bu belgeleri DOM temsil etmektedir.
DOM’un yapmış olduğu çalışmalar, ilgili belgeyi, üzerinde oynama yapılacak biçimde sunar.
DOM, internet sitesini temsil ederken onun bir komut dosyası diliyle değiştirilebildiğini gösterir.
Kısaca açıklamak gerekirse DOM ( Document Object Model), herhangi bir kodlama dili değil, DOM belgeleri nesne tabanlı olarak temsil etmektedir.
Bahsi geçen belgeler üzerinden komut dilleri sayesinde biçim ve içeriklerin değiştirilmesiyle belirli seviyeye ulaştıran bir standarda sahiptir

DOM’UN Programlama Dilleriyle Bağlantısı Nedir?

HTML kaynak koduna sahip olan bir belgenin olduğunu varsayalım. Programlama dillerinin de bu belge üzerinden değişiklikler yapabilmesi adına, belgelerin bu diller tarafınca anlaşılabilir olması gerekir. DOM, HTML belgelerini programlara dillerinin yaptığı çalışmalarla manipüle edilebilecek nesnelere çevirmektedir. Kısaca, DOM, HTML belgeleriyle programlama dilleri arasındaki bağlantı için yapılmış bir standarttır diyebiliriz. Böylelikle dom ne demek ve dom nedir soruları hakkındaki soru işaretleri bir nebze olsa giderilmiş olur.

DOM (Document Object Model) Bölümleri Nedir?

DOM, World Wide Web Consortium (W3C) standardı olarak tanımlanmaktadır. Böylelikle bu standart sayesinde hem komut dosyalarının hem de programlama dillerinin nesnelerle kolayca iletişim kurmasını sağlıyor. Kurulan bu iletişim nesnelerin dinamik değişimler yaşamasını sağlıyor. Nesnelerin bu değişimlerle yeniden güncellenebilmesi oldukça önemlidir. Dilden ayrıca depolanmış olan bilgiler, farklı API’lerin desteğiyle kullanılacak belgeleri yeniden oluşturuyor. Belgelerin içerikleri, yapıları ve stilleri, programlama dillerince kolayca değiştirilebilir. Geliştiricilerin kullandığı 3 temel DOM bölümü bulunmaktadır.

Bu bölümler şöyledir;

Çekirdek Dom ( Core Dom): Bütün belgeler için kullanılabilir olan standart bir DOM bölümüdür.
XML DOM: Sadece XML belgelerinin kullandığı standart DOM bölümüdür.
HTML DOM: Bütün HTML belgelerinin kullandığı standart DOM modelidir.

DOM (Document Object Model) İle Alakalı Kavramlar

DOM içeriklerinin incelenmesiyle karşımıza birçok zaman nesne, belge gibi birçok kavram çıkar. İçeriğin en keyif veren kısımlarını görmeden önce kelimelerin anlamların öğrenelim.

Belge: Document Object Model üzerinde belge HTML kodu sayesinde hazırlanan sayfadır.
Nesne: Document Object Model üzerinde nesne HTML koduyla hazırlanan sayfalar içerisinde olan ögelerin tümüdür.
Çağrılmak: Herhangi bir kod parçacığının bir komutun aktif edilebilmesi adına DOM ağacı içinde yer alan nesnelerin hiyerarşik bir biçimde sıralanarak çağırılması gerekmektedir. Bu sıra öncesinde doküman ve hemen ardından ‘’root element’’ element sırasıyla çağrılır. Çağrılmak işlev gösterebilmesi adına aktif olmak anlamını taşır.
Dom Düğüm Ağacı (DOM Node Tree): DOM yapısının hiyerarşik bir ilişki içinde nesne ve belgeleri birbirlerine bağlanmış olduğu yapılardır. Bu yapıların içerisinde Document, DocumentType, DocumentFragment, Element, Text, Comment ve Processinginstruction nesneleri yer alır. Ayrıca bu nesneler düğümler halinde birbirlerine bağlanmaktadır. Ağaçların her bir düğümünde, düğüm türleri ve düğümler ile izin verilmiş alt ögeler bulunmaktadır. Böylelikle hiyerarşik yapılarla erişilebilecek alanların ayrılması gerekir. DOM düğüm ağacı, kaynak ögelerin ne olduğuyla alakalı farklı isimler alabilmektedir. Örnek olarak öge herhangi bir Document elementiyse ağaç ‘’Document Tree’’ biçimde kavramsal bir hale getirilir. Fakat kaynak element ‘’Shadow’’ ise ağaçta ‘’Shadow Tree’’ olarak kavramsal bir biçimde getirilir.
DOM Çözümlemeleri: DOM ile gerçekleştirilebilen eylemlere çözümlemeler denir. Örnek olarak HTML ögelerinin üzerinden yapılan işlemlerin her biri farklı çözümlemelerdir.

DOM ve Javascript

Javascript diliyle yazılan herhangi bir dilin kolay bir şekilde değişmesi ve manipüle edilmesiyle kullanılmış olan DOM’u detaylıca incelemek gerekir. Ayrıca aşağıda yer alan Javascript ile yazılmış olan bir kod yer almaktadır. Standart bir biçimde çalışan Document Object Model’in yapmış olduğu şey, aşağıda yer alan kodda olan query Selector All yöntemine, belge içinde yer alan bütün ögelerinin listelerini döndürme işlemlerini söylemektir.

Örneğin:

‘’<!—wp:paragraph -- >

const paragraphs = document. querySelectorAll(‘’p’’);

<!-- /wp:paragraph –

<!—wp:paragraph à

//paragraphs[1] ist the first element 

<!--/wp:paragraphà

<!—wp:paragrahp:à

//paragraphsà

//paragraphs[1] is the second element, etc.

<!-- /wp:paragraphà

<!—wp:paragraphà

alert(paragraphs)[0].nodeName);

<!--/wp:paragraphà’’

Yukarıda yer verdiğimiz örnekte kullandığımız dil Javascripttir Yalnız kodlama dilinin belgeye erişmesi ve belgede belirli düzenlemeler yapılması için DOM kullanılmıştır. Javascript dili herhangi bir internet sitesi üzerinde yer alan belgeler ve belgelerin içindeki bileşenlerin üzerinde eylemler gerçekleştirebilmesi sadece DOM sayesinde mümkün olabilir. DOM gerekli olan kodu, kodlama dilleriyle anlaşılabilir ve düzenleme yapılabilecek bir biçime getirmiştir.

Dom Kodlama Sayfalarına Neler Yapabilir?

DOM yaptığı düzenlemeler ile yukarıda yer alan ögeleri, belgelerin nesne modelini oluşturup parçalar getirir. Böylelikle DOM Ağacı içinde olan bu parçaların her birine ayrı ayrı ulaşmak mümkündür. DOM belli başlı programlama dillerinden bağımsız bir biçimde içeriklerin depolanmasına olanak sağlar. Ayrıca belge herhangi bir API üzerinden kullanılabilmektedir. Öncesinde Javascript ve DOM yapısı iç içe geçen biçimde görülmekteydi. Lakin daha sonra ayrı ayrı nesnelere dönüştüler. Böylelikle sayfanın içeriği kodlama dillerinden bağımsız bir biçimde DOM içinde depolanmış oldu. Lakin bahsi geçen depolama kodlama dilleriyle ara sıra iletişimsizlik yaratamaması adına, DOM Javascriptle ulaşılabilen nesneler oluşturdu.

Herhangi bir web sitesinin içerisinde Javascript DOM yardımıyla aşağıda yer alan çalışmaları yapabilir;

Sayfa içerisinde yer alan HTML ögeleriyle özniteliklerinden herhangi birini değiştirip silebilir. Ya da var olan herhangi bir ögenin niteliğini ya da özelliğini değiştirebilir.
Sayfa içinde yer alan CSS stillerinin üzerinde oynama, değişim yapabilir.
Ayrıca bütün mevcut olaylara tepkiler oluşturup farklı aktiviteler yapabilir.
Yeni olaylar ve aktiviteler oluşturabilmesi mümkündür.

DOM yukarıda bahsedilen çalışmaları istediği kodlama dili için ulaşılabilir yapabilir. Örnek olarak Phyton da DOM’un yoğun bir biçimde kullanmış olduğu farklı bir yazılım dilidir.

DOM ve Phyton

Sizlere nesnelerin her birbirini programlama dillerinden bağımsız bir biçimde depolanıp, programlama dilleri tarafından değiştirilip, erişilebilir olduğu farklı bir örnek çalışmayı Phyton üzerinden farklı şekillerde kodlamalar ile anlatılabilir.

Web Tasarım