DOM Manipülasyonu, JavaScript’in web sayfalarındaki HTML öğeleriyle etkileşim kurmasını ve bu öğeleri değiştirmesini sağlayan önemli bir konsepttir. Bu konsept, sayfa üzerindeki içeriği dinamik olarak değiştirmek ve güncellemek için kullanılır. JavaScript, DOM’a erişerek öğeleri seçebilir, özelliklerini değiştirebilir ve hatta yeni öğeler ekleyebilir.

Örneğin, aşağıdaki JavaScript kod bloğunda, bir sayı değişkeni oluşturulmuş ve bu sayı değişkeninin string’e çevrilmesi işlemi gerçekleştirilmiştir. Bu işlem sayesinde, sayının türü değiştirilmiş ve konsol ekranına yazdırılan sonuç incelendiğinde, artık sayının bir string olduğu görülmektedir.

let sayi = 42;
let sayiString = sayi.toString();
console.log(typeof sayiString); // "string"

Yukarıdaki örnekte, JavaScript’in DOM manipülasyonu yaptığı bir ekran görüntüsü verilmemiş olsa da, DOM manipülasyonu genellikle HTML öğelerini seçmek ve bu öğeler üzerinde değişiklikler yapmak için kullanılır. Örneğin, bir butona tıklandığında bir metin alanındaki metni değiştirmek veya bir resmin boyutunu güncellemek gibi işlemler, DOM manipülasyonu aracılığıyla gerçekleştirilir.

DOM manipülasyonu genellikle, belirli bir HTML öğesini seçmek için `document.querySelector()` veya `document.getElementById()` gibi DOM yöntemlerini kullanarak başlar. Ardından, seçilen öğenin içeriğini değiştirmek veya özelliklerini güncellemek için JavaScript ile bu öğeye erişilir ve gerekli işlemler yapılır.

Aşağıda, basit bir örnekle DOM manipülasyonunun nasıl yapılabileceği gösterilmektedir:

“`javascript
let baslik = document.querySelector(‘h1’);
baslik.innerText = ‘Merhaba Dünya!’;
baslik.style.color = ‘red’;
“`

Yukarıdaki örnekte, `document.querySelector()` yöntemi kullanılarak bir `

` başlık öğesi seçilmiş, daha sonra bu başlığın metninin ‘Merhaba Dünya!’ olarak değiştirildiği ve metnin renginin kırmızı olarak ayarlandığı görülmektedir.

JavaScript’in DOM manipülasyonu, web geliştiricilerin web sayfalarını dinamik ve etkileşimli hale getirmelerini sağlayan önemli bir araçtır. Bu sayede, kullanıcılarla daha etkili iletişim kurulabilir ve kullanıcı deneyimi geliştirilebilir.