JavaScript DOM Nedir ve Neden Önemlidir?

eminbasbayan

3 dk okuma

JavaScript DOM Nedir ve Neden Önemlidir?

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

HTML ve CSS kullanarak bir web sayfası oluşturduğumuzda, sayfanın iskeleti ve görsel tasarımı ortaya çıkar. HTML ile başlıklar, paragraflar, görseller gibi içerikler eklenir; CSS ile bu içerikler renklendirilir, hizalanır ve biçimlendirilir. Ancak bu noktada sayfamız hâlâ statik, yani hareketsizdir. Gerçek web uygulamalarında ise kullanıcı ile etkileşim kurabilen dinamik yapılar bulunur. İşte bu noktada JavaScript devreye girer.

Peki JavaScript, HTML ve CSS ile nasıl iletişim kurar? Cevap: DOM (Document Object Model).

DOM Nedir?

DOM’un açılımı Document Object Model’dir, Türkçeye “Belge Nesne Modeli” olarak çevrilebilir. Tarayıcı, HTML belgesini yüklediğinde, onu JavaScript’in anlayabileceği bir nesne yapısına dönüştürür.

Başka bir deyişle, bir web sayfasındaki her bir HTML öğesi (ör. <h1>, <p>, <img>) DOM sayesinde birer JavaScript nesnesi haline gelir. Böylece JavaScript bu nesnelere ulaşabilir, içeriklerini değiştirebilir, onları gizleyebilir ya da yeniden biçimlendirebilir.

Örneğin sayfada <h1>Merhaba</h1> yazıyorsa, tarayıcı bu etiketi DOM içerisinde bir nesne olarak saklar. Artık JavaScript bu nesneye erişip metni “Hoş Geldiniz” olarak değiştirebilir.

DOM’un Yapısı: Ağaç Modeli

DOM, bir ağaç yapısı (tree structure) şeklinde modellenmiştir. Bu modelde:

En tepede document nesnesi bulunur.
Onun altında html etiketi vardır.
html içinde head ve body bölümleri yer alır.
body içinde başlıklar, paragraflar, bölümler (section) gibi öğeler bulunur.

Örnek HTML:

<body>
  <h2>Hakkımızda</h2>
  <section>
    <p>Biz yazılım eğitimi sunan bir platformuz.</p>
  </section>
</body>

Bu yapı DOM içinde şöyle temsil edilir:

document
- html
  - head
  - body
    - h2
    - section
      - p

Bu ebeveyn (parent) ve çocuk (child) ilişkisi sayesinde JavaScript, istediği öğeyi kolayca bulup üzerinde işlem yapabilir.

Generated Image November 21, 2025 - 9_27PM

`document` Nesnesi

DOM’un merkezinde document nesnesi bulunur. Bu nesne, sayfanın tamamını temsil eder ve tarayıcı tarafından otomatik oluşturulur.

Tarayıcı konsolunda document yazıldığında HTML yapısını görürüz. Ancak bu yalnızca görsel bir temsildir. Gerçekte bir nesne olduğunu görmek için:

console.dir(document);

Bu komutla document nesnesinin tüm özelliklerini ve metotlarını görebiliriz. Örnekler:

document.URL → Sayfanın adresi
document.title → Sayfanın başlığı
document.body → Sayfanın <body> bölümü
document.images → Sayfadaki tüm görsellerin listesi

DOM Üzerinde Değişiklik Yapmak

JavaScript, DOM sayesinde sayfa üzerinde gerçek zamanlı değişiklikler yapabilir.

Örneğin HTML’de şöyle bir etiket olsun:

<strong>Giriş</strong>

JavaScript ile bunu değiştirebiliriz:

document.all[12].innerText = "Ana Sayfa";

Kod çalıştırıldığında, sayfadaki yazı kullanıcıya “Ana Sayfa” olarak görünür.

Bu tür işlemler sayesinde web sayfaları yalnızca bilgi sunan panolar olmaktan çıkar, dinamik ve etkileşimli uygulamalar haline gelir.

Etkileşimli Web Deneyimlerine Örnekler

Üniversite Sitesi: “Bölümlerimiz” başlığının altında bir liste gizlenmiştir. Kullanıcı “Tüm Bölümleri Göster” butonuna tıkladığında liste görünür hale gelir.
Alışveriş Sitesi: “Sepetim” butonuna basıldığında, sağdan açılan panelde ürünler listelenir. Kullanıcı “Sil” veya “Miktar Arttır” butonlarına bastığında, DOM üzerinden ilgili ürün kaldırılır veya güncellenir.

Bu tür etkileşimler tamamen JavaScript + DOM iş birliği sayesinde gerçekleşir.

DOM Olmasaydı Ne Olurdu?

Eğer DOM olmasaydı, JavaScript’in HTML’e ulaşması mümkün olmazdı. Böylece:

Butona tıklayınca kutular açılamaz,
Kullanıcı etkileşimleri algılanamaz,
İçerikler dinamik olarak değiştirilemezdi.

Web sayfaları yalnızca statik bilgi panoları olarak kalırdı.

Sonuç: DOM’un Önemi

Özetle:

DOM, HTML öğelerini JavaScript tarafından yönetilebilen nesnelere dönüştürür.
Bu nesneler, hiyerarşik bir ağaç yapısında saklanır.
document nesnesi DOM’un merkezidir ve sayfanın her bölümüne erişim sağlar.
JavaScript, DOM sayesinde sayfanın içeriğini ve görünümünü değiştirebilir, kullanıcıya tepki veren dinamik uygulamalar oluşturabilir.

Bir web geliştiricisi için DOM, etkileşimli web sitelerinin kalbidir. HTML ve CSS ile yapı ve görünüm oluşturulduktan sonra, DOM sayesinde JavaScript bu yapıya “can” verir.

Bir sonraki adımda, DOM’un merkezindeki document nesnesini daha detaylı inceleyerek JavaScript’in sayfa ile nasıl iletişim kurduğunu göreceğiz.