DOM Giriş
DOM (Document Object Model), bir web sayfasının yapısını temsil eden ve JavaScript ile etkileşim kurmamıza olanak sağlayan bir modeldir. Her HTML elementi DOM’da bir “node” yani düğüm olarak yer alır ve bu düğümler üzerinde değişiklik yapmak, içerik eklemek veya silmek mümkündür. DOM, bir evi inşa etmek gibi düşünülebilir: temel yapıyı kurarız ve odaları (elementleri) istediğimiz şekilde dekore ederiz veya yeniden düzenleriz.
DOM, kişisel web sitelerinde içerikleri dinamik olarak değiştirmek, bloglarda yeni yazılar eklemek, e-ticaret sitelerinde ürünleri güncellemek ve haber sitelerinde başlıkları anında değiştirmek için kullanılır. Bu ders sayesinde okuyucu, DOM’a nasıl erişileceğini, elementlerin nasıl seçileceğini, içeriklerinin nasıl güncelleneceğini ve kullanıcı etkileşimlerine nasıl tepki verileceğini öğrenecektir.
DOM ile çalışmak, bir mektup yazmak gibi de düşünülebilir: her bölüm belirli bir alana sahiptir ve değişiklik yapmak için doğru bölüme odaklanmalısınız. Bu temel bilgi, web sayfalarını daha interaktif ve kullanıcı dostu hale getirmek için gereklidir.
Temel Örnek
javascript<!DOCTYPE html>
<html>
<body>
<h1 id="baslik">Hoşgeldiniz!</h1>
<script>
// Select element by its ID
let element = document.getElementById("baslik");
// Change the text content
element.textContent = "Kişisel Web Siteme Hoşgeldiniz!";
</script>
</body>
</html>Bu temel örnekte,
etiketi “baslik” ID’si ile tanımlanmıştır. document.getElementById("baslik") metodu ile bu element DOM’dan seçilir. getElementById yöntemi, sayfada tekil olan ID’leri bulmak için kullanılır ve hızlı erişim sağlar.
Elementin textContent özelliği ile metin içeriği değiştirilir. Böylece sayfanın yeniden yüklenmesine gerek kalmadan içerik güncellenir. DOM’daki her düğüm bir JavaScript objesi gibi davranır ve üzerinde değişiklik yapılabilir, içerik okunabilir veya silinebilir. Bu işlem, bir kütüphanede kitapları düzenlemek gibi düşünülebilir: her kitabın (elementin) yeri bellidir ve ihtiyacınıza göre yeniden düzenlenebilir.
Pratik Örnek
javascript<!DOCTYPE html>
<html>
<body>
<h2 id="haber-baslik">Günün Haberi</h2>
<p id="haber-icerik">Orijinal haber metni.</p>
<button id="btn-guncelle">Haberi Güncelle</button>
<script>
// Select elements
let baslik = document.getElementById("haber-baslik");
let icerik = document.getElementById("haber-icerik");
let buton = document.getElementById("btn-guncelle");
// Add click event
buton.addEventListener("click", function() {
baslik.textContent = "Acil Haber";
icerik.textContent = "Haber DOM kullanılarak dinamik bir şekilde güncellendi.";
}); </script>
</body>
</html>Bu örnek daha pratiktir ve bir başlık, paragraf ve buton içerir. getElementById ile elementler seçilir ve addEventListener ile butona tıklama olayı eklenir. Tıklama gerçekleştiğinde başlık ve paragraf güncellenir.
DOM ile çalışmak, bir odanın dekorasyonunu değiştirmek gibidir: tüm evi yeniden yapmadan sadece gerekli öğeleri güncellersiniz. Bu yaklaşım, bloglarda, haber sitelerinde veya e-ticaret platformlarında içerikleri dinamik şekilde göstermeye olanak tanır. Elementlerin varlığını kontrol etmek, hatalardan kaçınmak ve kodu organize etmek performans açısından önemlidir.
DOM ile çalışırken iyi uygulamalar ve yaygın hatalar:
İyi uygulamalar:
- Modern seçiciler (getElementById, querySelector) kullanmak.
- addEventListener ile event yönetimi yapmak.
- Element referanslarını saklayarak tekrar sorgulardan kaçınmak.
-
DOM tamamen yüklenmeden işlemleri başlatmamak.
Yaygın hatalar: -
Event veya elementleri kaldırmadan bellek sızıntısı oluşturmak.
- DOM yüklenmeden elementlere erişmeye çalışmak.
- Fazla doğrudan DOM manipülasyonu ile performans kaybı.
- Hata yönetimini ihmal etmek.
Hata ayıklama için console.log kullanmak, DOMContentLoaded etkinliğini beklemek ve kodu modüler tutmak önerilir.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| getElementById | ID ile element seçer | document.getElementById("baslik") |
| querySelector | CSS seçici ile ilk elementi seçer | document.querySelector(".sinif") |
| textContent | Elementin metnini okur veya değiştirir | element.textContent = "Yeni Metin" |
| addEventListener | Elemente event ekler | element.addEventListener("click", function(){}) |
| appendChild | Elementi başka bir elementin içine ekler | parent.appendChild(child) |
| removeChild | Elementi DOM’dan çıkarır | parent.removeChild(child) |
Özet ve sonraki adımlar:
Bu ders DOM’un temel işlevlerini, element seçimini, metin güncellemeyi ve event yönetimini öğretti. DOM bilgisi, web sayfalarını interaktif yapmak ve backend ile veri iletişimini sağlamak için gereklidir.
Bir sonraki adım: createElement ile yeni elementler oluşturmak, listeler ve tablolar üzerinde çalışmak, gelişmiş event yönetimi ve AJAX ile dinamik içerik yönetimi. Küçük projeler üzerinde çalışarak pratik kazanmak önemlidir. DOM’u öğrenmek, bir kütüphaneyi düzenlemek gibidir: her şeyin yeri bellidir ve kolayca erişip düzenleyebilirsiniz.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek