DOM Manipülasyonu

# JavaScript’in DOM Manipülasyonu

JavaScript, web sayfalarındaki HTML, CSS ve diğer içerikleri dinamik bir şekilde değiştirmek ve kontrol etmek için kullanılan bir programlama dilidir. DOM (Document Object Model) ise bir web sayfasının yapısını temsil eden bir programlama arayüzüdür. JavaScript’in DOM manipülasyonu yapması, web sayfalarını interaktif hale getirmemizi sağlar ve kullanıcı deneyimini geliştirir.

## DOM ve Element Seçimi

JavaScript, DOM üzerinde işlem yapmak için belirli elemanları seçmek gerekmektedir. Bu elemanları seçmek için `document.querySelector()` veya `document.getElementById()` gibi metodlar kullanılır. Örneğin:

let element = document.querySelector(".class");
let header = document.getElementById("header");

Yukarıdaki kod örneğinde, sınıfı `.class` olan bir elemanı seçmek için `querySelector()` metodunu kullandık ve `getElementById()` metoduyla id’si `header` olan bir elemanı seçtik.

## Element Özelliklerini Değiştirme

Seçtiğimiz elemanların özelliklerini değiştirmek ve güncellemek için JavaScript kullanabiliriz. Örneğin, bir elemanın metin içeriğini değiştirmek için `innerText` özelliğini kullanabiliriz:

let element = document.querySelector(".example");
element.innerText = "Yeni Metin";

Yukarıdaki örnekte, `.example` sınıfına sahip bir elemanın metin içeriği “Yeni Metin” olarak güncellenmiştir.

## Element Oluşturma ve Ekleme

JavaScript kullanarak yeni bir eleman oluşturabilir ve bu elemanı sayfaya ekleyebiliriz. Örneğin, yeni bir `div` elemanı oluşturmak ve sayfaya eklemek için şu kodu kullanabiliriz:

let newDiv = document.createElement("div");
newDiv.innerText = "Yeni Div Elementi";
document.body.appendChild(newDiv);

Yukarıdaki örnekte, `createElement()` metoduyla yeni bir `div` elemanı oluşturduk ve `appendChild()` metoduyla bu elemanı sayfaya ekledik.

JavaScript’in DOM manipülasyonu yaptığı bir ekran görüntüsü:


Bu örneklerle JavaScript’in DOM manipülasyonu konusunda temel bilgiler edindik. DOM manipülasyonu kullanarak web sayfalarını daha etkileşimli hale getirebilir ve kullanıcı deneyimini artırabiliriz.