DOM Nedir?
DOM (Document Object Model), web sayfalarının tarayıcı tarafından nasıl temsil edildiğini açıklayan bir yapıdır. HTML belgesi, ağaç yapısında düğümler (nodes) olarak modellenir. Bu yapı sayesinde JavaScript ile sayfa içeriğine erişebilir, değiştirebilir, silebilir veya yeni içerikler ekleyebilirsiniz.
DOM, tarayıcı tarafından oluşturulan bir “arayüzdür” ve sayfa yüklendiğinde tüm HTML elementlerini nesne olarak tanımlar. Böylece JavaScript ile bu elementler üzerinde işlemler gerçekleştirebilirsiniz.
DOM Manipülasyonu Nedir?
DOM Manipülasyonu, JavaScript kullanarak HTML elementlerinin içeriklerini, stillerini veya yapısını değiştirme işlemidir. Sayfa yeniden yüklenmeden kullanıcı etkileşimlerine cevap vermenizi sağlar. Bu teknik, modern web uygulamalarının interaktif olmasının temelini oluşturur.
DOM’a Erişim Yöntemleri
HTML sayfasındaki bir elementi seçmek için farklı yöntemler mevcuttur:
// ID ile seçim
document.getElementById("baslik");
// Class ile seçim
document.getElementsByClassName("kutu");
// Tag name ile seçim
document.getElementsByTagName("p");
// querySelector (ilk eşleşen)
document.querySelector(".kutu");
// querySelectorAll (tüm eşleşenler)
document.querySelectorAll("div.kutu");
İçerik Değiştirme
Bir HTML elemanının metin veya HTML içeriğini değiştirmek için aşağıdaki yöntemler kullanılır:
// Metin içeriğini değiştir
document.getElementById("baslik").textContent = "Yeni Başlık";
// HTML içeriğini değiştir
document.getElementById("kutu").innerHTML = "<strong>Yeni içerik</strong>";
Yeni Eleman Eklemek
Yeni bir HTML elementi oluşturup DOM’a eklemek:
// Yeni paragraf oluştur
const yeniParagraf = document.createElement("p");
yeniParagraf.textContent = "Bu yeni bir paragraftır.";
// Mevcut bir container'a ekle
document.getElementById("container").appendChild(yeniParagraf);
Eleman Silmek
Bir elementi DOM’dan kaldırmak:
const silinecek = document.getElementById("kutu");
silinecek.remove();
Stil ve Sınıf Değiştirme
Elementin CSS stillerini ve class’larını JavaScript ile değiştirebilirsiniz:
// Stil ekleme
document.getElementById("kutu").style.backgroundColor = "lightblue";
// Sınıf ekleme
document.getElementById("kutu").classList.add("aktif");
// Sınıf kaldırma
document.getElementById("kutu").classList.remove("aktif");
DOM Olaylarıyla Etkileşim
DOM manipülasyonu genellikle olaylarla (event) birlikte kullanılır. Örneğin bir butona tıklanınca bir elementin içeriğini değiştirmek:
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("mesaj").textContent = "Butona tıklandı!";
});
🎯 Sonuç
DOM Manipülasyonu, JavaScript’in en güçlü yönlerinden biridir. Kullanıcı etkileşimlerine hızlı tepki vermek, içerik dinamik olarak güncellemek ve modern web deneyimi oluşturmak için gereklidir. document.querySelector, appendChild, remove() gibi temel yöntemlerle DOM üzerinde rahatlıkla kontrol sağlayabilirsiniz.
