DOM (Document Object Model) Nedir?

DOM (Document Object Model) Nedir?

Document Object Model (DOM), bir HTML, XML veya XHTML belgesinin tarayıcı tarafından oluşturulan yapısal bir temsilidir. DOM, bir web belgesinin tüm elemanlarını (etiketler, metinler, öznitelikler vb.) bir nesne olarak temsil eder ve bu nesnelerin programatik olarak manipüle edilmesine olanak tanır. JavaScript gibi diller kullanılarak DOM üzerinde değişiklik yapılabilir, böylece dinamik web sayfaları oluşturulabilir.

DOM’un Yapısı

DOM, bir belgeyi hiyerarşik bir ağaç yapısı olarak temsil eder. Bu yapı, belgedeki tüm elemanları ve içeriklerini düğümler (node) olarak düzenler. Her düğüm, belge içerisindeki belirli bir yapıya karşılık gelir:

1. Document:
   • Hiyerarşinin en üst düzeyinde yer alır ve tüm düğümlerin köküdür.
2. Element Nodes:
   • HTML etiketleri olarak temsil edilir. Örneğin, <div>, <p>, <h1> gibi.
3. Attribute Nodes:
   • Elementlerin özniteliklerini temsil eder. Örneğin, class="container".
4. Text Nodes:
   • Elementler arasında yer alan metin içeriklerini temsil eder.
5. Comment Nodes:
   • HTML yorumlarını (<!-- yorum -->) temsil eder.

DOM Ağacı

Bir HTML belgesi şu şekilde temsil edilir:

Örnek HTML Belgesi:

DOM Ağacı:

DOM ile Çalışma

JavaScript, DOM ile etkileşim kurarak HTML elemanlarını seçebilir, içeriğini değiştirebilir, yeni elemanlar ekleyebilir veya silebilir.

1. DOM Elemanlarını Seçmek

DOM’daki elemanları seçmek için çeşitli yöntemler kullanılır:

• ID ile Seçim:
  let baslik = document.getElementById("baslik");

• Sınıf Adı ile Seçim:
  let paragraflar = document.getElementsByClassName("paragraf");

• Etiket Adı ile Seçim:
  let divler = document.getElementsByTagName("div");

• CSS Seçicisi ile Seçim:
  let ilkDiv = document.querySelector("div");
let tumDivler = document.querySelectorAll("div");


2. DOM Elemanlarını Değiştirmek

• İçerik Güncelleme:
  let baslik = document.getElementById("baslik");
baslik.textContent = "Yeni Başlık";

• HTML Güncelleme:
  baslik.innerHTML = "<span>Yeni Başlık</span>";

• Öznitelik Güncelleme:
  baslik.setAttribute("class", "yeni-sinif");


3. Yeni Elemanlar Eklemek

4. Elemanları Silmek

DOM’un Özellikleri

1. Dinamik:
   • DOM ile sayfa içeriği kullanıcı etkileşimlerine göre anında değiştirilebilir.
2. Programlanabilir:
   • JavaScript gibi dillerle DOM üzerinde manipülasyon yapılabilir.
3. Olay Yönetimi:
   • DOM, kullanıcı etkileşimlerini (tıklama, klavye girişleri vb.) yönetmek için olay tabanlı bir yapıya sahiptir.
4. Platform Bağımsız:
   • DOM, farklı tarayıcılar ve platformlar üzerinde çalışabilir.

DOM Seviyeleri

DOM’un farklı seviyeleri vardır:

1. Core DOM:
   • Tüm belgeler için ortak olan genel yapı.
2. XML DOM:
   • XML belgeleriyle çalışma özellikleri.
3. HTML DOM:
   • HTML belgeleriyle çalışma özellikleri (özellikle form elemanları, bağlantılar, resimler vb.).

DOM’un Avantajları

1. Dinamik Web İçeriği:
   • Statik bir sayfayı dinamik hale getirmek için kullanılır.
2. Kolaylıkla Güncellenebilirlik:
   • Sayfa yeniden yüklenmeden içerik değişiklikleri yapılabilir.
3. Kullanıcı Etkileşimi:
   • Olay dinleyicileri ile kullanıcı etkileşimleri kolayca yönetilebilir.

DOM ve JavaScript Olayları

DOM, olayları işlemek için geniş bir yapı sunar. Örneğin:

• Tıklama Olayı:
  document.querySelector("button").addEventListener("click", function () {
alert("Butona tıklandı!");
});

• Form Doğrulama:
  document.querySelector("form").addEventListener("submit", function (event) {
event.preventDefault();
alert("Form gönderildi.");
});


DOM ile İlgili Kütüphaneler

DOM manipülasyonunu kolaylaştıran bazı kütüphaneler:

1. jQuery:
   • DOM işlemlerini basitleştiren popüler bir JavaScript kütüphanesidir.
2. React.js:
   • Sanal DOM kullanarak daha hızlı bir kullanıcı deneyimi sunar.
3. Vue.js ve Angular:
   • DOM üzerinde dinamik veri bağlama ve etkileşim sağlar.

DOM’un Dezavantajları

1. Performans Sorunları:
   • Çok büyük bir DOM ağacı, manipülasyon sırasında yavaşlamalara neden olabilir.
2. Tarayıcı Farklılıkları:
   • Eski tarayıcılar, modern DOM özelliklerini desteklemeyebilir.
3. Karmaşıklık:
   • Büyük projelerde DOM manipülasyonu zor ve karmaşık hale gelebilir.

Sonuç

DOM, web geliştirme dünyasında çok önemli bir araçtır. HTML ve JavaScript ile birlikte çalışarak dinamik, interaktif ve kullanıcı dostu web siteleri oluşturmayı mümkün kılar. DOM’un doğru bir şekilde kullanılması, daha hızlı ve etkili web uygulamaları geliştirilmesine olanak sağlar.