DOM Tam Olarak Nedir?
Document Object Model (Belge Nesne Modeli) veya “DOM” web sayfalarına bir arayüzdür. Temelde, programın sayfanın içeriğini, yapısını ve stillerini okumasını ve değiştirmesini sağlayan bir API’dir. Bu ifadeyi biraz güncelleyelim.
Bir web sayfası nasıl oluşturulur?
Bir tarayıcı, kaynak HTML belgesinden, görünüm alanında stilli ve etkileşimli bir sayfa göstermeye “Critical Rendering Path( Kritik İşleme Yolu)” denilen bir yöntemle başlar. Her ne kadar bu işlem birkaç aşamaya ayrılabilse de, bu adımlar kabaca iki aşamada gruplandırılabilir. İlk aşama, sayfada neyin sonuçlandırılacağına karar vermek için belgeyi ayrıştırmak için tarayıcıyı ve ikinci aşama, render işlemini gerçekleştiren tarayıcıyı içerir.
Render tree, sayfada gösterilecek olan HTML öğelerinin ve ilgili stillerinin bir gösterimidir. Bu ağacı oluşturmak için tarayıcının iki şeye ihtiyacı vardır:
- CSSOM, elemanlarla ilişkilendirilmiş stillerin temsili
- DOM, öğelerin temsili
DOM nasıl Oluşturulur(ve neye benzer)?
DOM, kaynak HTML belgesinin nesne temelli bir gösterimidir. Aşağıda göreceğimiz gibi bazı farklılıkları vardır, ancak temel olarak HTML belgesinin yapısını ve içeriğini çeşitli programlar tarafından kullanılabilecek bir nesne modeline dönüştürme denemesidir.
DOM’un nesne yapısı “node tree (düğüm ağacı)” olarak adlandırılan şeyle temsil edilir. Buna her birinde yaprakları olabilecek birkaç alt dalda dallanan tek bir ana gövdesi olan bir ağaç olarak düşünülebilir. Bu durumda, üst “root” kök <html> öğesidir, çocuk “dallar” yuvalanmış öğelerdir ve “yapraklar” öğelerin içindeki içeriktir.
Bu HTML belgesini örnek olarak alalım:
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <html lang="tr"> <head> <title>İlk Web Sayfası</title> </head> <body> <h1>Merhaba Dünya!</h1> <p>Nasılsın?</p> </body> </html> |
Bu belge aşağıdaki DOM ağacı olarak gösterilebilir:
DOM ne değildir
Yukarıda verdiğim örnekte, DOM kaynak HTML belgesinin bire bir eşlenmesi görünüyor. Ancak dediğim gibi, farklılıklar var. DOM’nin ne olduğunu tam olarak anlamak için, ne olmadığına bakmamız gerekir.
DOM, kaynak HTML Kodu Değildir
DOM, kaynak HTML belgesinden oluşturulmuş olmasına rağmen, her zaman tam olarak aynı değildir. DOM’nin kaynak HTML’den farklı olabileceği iki örnek vardır.
1. HTML geçerli olmadığında
DOM, geçerli HTML dokümanları için bir arayüzdür. DOM oluşturma işlemi sırasında, tarayıcı HTML kodundaki bazı geçersizlikleri düzeltebilir.
Örneğin bu HTML belgesini alalım:
1 2 3 4 5 6 | <!doctype html> <html> Merhaba Dünya! </html> |
Belgede, geçerli HTML için bir gereksinim olan bir <head> ve <body> öğesi eksik. Sonuçta ortaya çıkan DOM ağacına bakarsak, bunun düzeltildiğini göreceğiz:
2. DOM Javascript tarafından değiştirildiğinde
Bir HTML belgesinin içeriğini görüntülemek için bir arayüz olmasının yanı sıra, DOM onu canlı bir kaynak haline getirerek de değiştirilebilir.
Örneğin, Javascript’i kullanarak DOM’a ek düğümler oluşturabiliriz.
1 2 3 4 5 6 | var yeniParagraf = document.createElement("p"); var paragrafYazi = document.createTextNode("Yeni Paragraf!"); yeniParagraf.appendChild(paragrafYazi); document.body.appendChild(yeniParagraf); |
Bu, DOM’i güncelleyecektir, elbette HTML dokümanımızı da.
DOM, tarayıcıda gördüğünüz şey değildir
Tarayıcı görünümünde gördüğünüz şey, bahsettiğim gibi DOM ve CSSOM’un bir birleşimi olan render ağacıdır. DOM’yi render ağacından gerçekten ayıran şey, ikincisinin yalnızca ekranda neyin boyanacağını içermesidir.
Render Tree, yalnızca oluşturulmuş olanla ilgilendiğinden, görsel olarak gizlenen öğeleri hariç tutar. Örneğin, display: none
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!doctype html> <html lang="tr"> <head> <title>İlk Web Sayfası</title> </head> <body> <h1>Merhaba Dünya!</h1> <p style="display: none">Nasılsın?</p> </body> </html> |
DOM <p> öğesini içerecektir:
Ancak, render ağacı ve dolayısıyla görünüm alanında görülenler bu öğeyi içermeyecektir.
DOM Tarayıcı Geliştirme Araçlarında Görünmez
Bu fark biraz daha küçüktür çünkü tarayıcı geliştirme araçları denetçisi, tarayıcıda sahip olduğumuz DOM’ye en yakın yaklaşımı sağlar. Ancak tarayıcı denetçisi, DOM’da olmayan ek bilgiler içerir.
Bunun en iyi örneği CSS sözde unsurlarıdır. Seçicilerin :: before ve :: after seçicileri kullanılarak oluşturulan sözde elemanlar, CSSOM’un bir parçasını oluşturur ve ağacı oluşturur, ancak teknik olarak DOM’un bir parçası değildir. Bunun nedeni, DOM’un, öğeye uygulanan stiller dahil değil, yalnızca kaynak HTML belgesinden oluşturulmuş olmasıdır.
Sahte unsurların DOM’un bir parçası olmamasına rağmen, bunlar tarayıcı denetiminde element olarak yer alır.
Bu nedenle sözde unsurlar, DOM’nin bir parçası olmadıkları için Javascript tarafından hedeflenemez.
Tekrar Edecek Olursak
DOM, bir HTML belgesine bir arayüzdür. Tarayıcılar, görünüm alanında ne oluşturulacağını belirlemede ilk adım olarak ve sayfanın içeriğini, yapısını veya stilini değiştirmek için Javascript programları tarafından kullanılır.
Kaynak HTML belgesinin diğer biçimlerine benzese de, DOM çeşitli şekillerde farklıdır:
- Javascript ile değiştirilebilen canlı bir modeldir.
- Sahte öğeler içermez (ör. :: after)
- Gizli öğeler içerir (örneğin, display:none)
1 Yorum