JavaScript’te DOM manipülasyonu nasıl yapılır?

JavaScript'te DOM Manipülasyonu

JavaScript, web sayfalarının yapısını ve içeriğini dinamik olarak değiştirmek için Document Object Model (DOM) üzerinde çeşitli işlemler yapar. DOM manipülasyonu ile HTML öğelerine erişebilir, güncelleyebilir veya yeni öğeler ekleyebilirsiniz.

Temel Kavramlar

• document: DOM'un temel nesnesidir. HTML belgesi üzerinde işlemler yapmanıza olanak tanır.
• querySelector: CSS seçicileri kullanarak öğeleri seçer.
• createElement: Yeni DOM öğeleri oluşturur.
• appendChild: Bir öğeyi diğerinin sonuna ekler.
• innerHTML: Öğenin içeriğini günceller.

Örnekler

Bir öğeyi seçip içeriğini güncellemek için:

let element = document.querySelector('#myElement');
element.innerHTML = 'Yeni içerik';

Yeni bir öğe oluşturup mevcut bir öğeye eklemek için:

let newElement = document.createElement('div');
newElement.innerHTML = 'Yeni bir div';
document.body.appendChild(newElement);

Sonuç

JavaScript ile DOM manipülasyonu, web sayfalarının dinamik ve etkileşimli olmasını sağlar. Temel yöntemleri öğrenerek sayfa içeriğini istediğiniz gibi yönetebilirsiniz.