JavaScript'te DOM Manipulation

DOM Manipulation (Document Object Model Manipulation), JavaScript'in HTML ve CSS ile etkileşimde bulunarak web sayfalarının dinamik olarak güncellenmesini ve değiştirilmesini sağlayan bir konsepttir. Document Object Model (DOM), web sayfalarını ağaç yapısında temsil eden bir yapıdır ve JavaScript'in bu yapının herhangi bir parçasını seçmesine, değiştirmesine veya yeni öğeler eklemesine olanak tanır.

DOM Elementlerini Seçme

DOM Manipulation'ın temelinde, belirli HTML öğelerini seçmek ve bu öğeler üzerinde işlem yapmak yatar. JavaScript'te document.querySelector() ve document.getElementById() gibi metodlar aracılığıyla belirli elementleri seçebiliriz.

// ID'si "demo" olan bir elementi seçme
let element = document.getElementById("demo");

// Class'ı "btn" olan ilk butonu seçme
let buton = document.querySelector(".btn");

Özelliklerini ve İçeriğini Değiştirme

DOM Manipulation ile seçilen elementlerin içeriğini veya özelliklerini değiştirebiliriz. Bu, kullanıcı etkileşimlerine yanıt vermek veya sayfa içeriğini güncellemek için sıklıkla kullanılır.

// ID'si "baslik" olan bir elementin içeriğini değiştirme
document.getElementById("baslik").innerHTML = "Merhaba Dünya!";

// Bir elementin stilini değiştirme
buton.style.backgroundColor = "red";

Yeni Öğeler Eklemek

DOM Manipulation, sayfaya dinamik olarak yeni HTML öğeleri eklemek için de kullanılabilir. Bu sayede web sayfası kullanıcı etkileşimlerine göre güncellenebilir.

// Yeni bir <p> öğesi oluşturup içeriğini ayarlama
let yeniParagraf = document.createElement("p");
yeniParagraf.innerHTML = "Yeni paragraf metni";

// Oluşturulan <p> öğesini sayfaya ekleme
document.body.appendChild(yeniParagraf);

Olay Dinleyicileri Eklemek

DOM Manipulation ile HTML öğelerine olay dinleyicileri ekleyerek kullanıcı etkileşimlerini yakalayabiliriz. Bu şekilde buton tıklamaları, fare hareketleri gibi etkileşimlere yanıt verebiliriz.

// Bir butona tıklama olayı dinleyici eklemek
buton.addEventListener("click", function() {
    console.log("Butona tıklandı!");
});

Sonuç

DOM Manipulation, web sayfalarını JavaScript aracılığıyla dinamik hale getirmenin temel bir yoludur. Elementleri seçmek, içeriği veya özellikleri değiştirmek, yeni öğeler eklemek ve olay dinleyicileri eklemek gibi yöntemlerle sayfanın görünümünü ve davranışını programatik olarak kontrol edebiliriz. Bu sayede interaktif ve dinamik web uygulamaları oluşturabiliriz.