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:
Bu ebeveyn (parent) ve çocuk (child) ilişkisi sayesinde JavaScript, istediği öğeyi kolayca bulup üzerinde işlem yapabilir.
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 adresidocument.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.