JavaScript ile DOM Manipülasyonu Nasıl Yapılır?

JavaScript ile DOM manipülasyonu, bir web sayfasının içeriğini, yapısını ve stilini kullanıcı sayfayı yenilemeden dinamik olarak değiştirme işlemidir. Modern web geliştirme süreçlerinde JavaScript ile DOM manipülasyonu yapmak, kullanıcı etkileşimini artıran ve yaşayan arayüzler oluşturulmasını sağlayan en kritik beceridir. Bu yöntem sayesinde, bir butona tıklandığında yeni bir paragraf oluşturabilir, form verilerini anlık olarak kontrol edebilir veya karanlık mod gibi tasarım değişikliklerini saniyeler içinde uygulayabilirsiniz.

DOM Nedir ve Neden Kullanılır?

DOM (Document Object Model), tarayıcı tarafından oluşturulan bir programlama arayüzüdür. Bir web sayfası yüklendiğinde, tarayıcı sayfanın HTML yapısını analiz eder ve her bir etiketi, niteliği ve metni birer nesne (object) haline getirir. Bu nesneler birbirine bağlı bir ağaç yapısı oluşturur. Bu yapıya “DOM Ağacı” denir.

JavaScript, bu ağaç yapısındaki dallara ve yapraklara (yani HTML etiketlerine) ulaşarak onları değiştirebilir. Örneğin, bir kullanıcının “Sepete Ekle” butonuna bastığını algılayan JavaScript, DOM üzerinden sepet sayısını günceller. Bu işlem, sayfanın tamamının sunucudan tekrar yüklenmesine gerek kalmadan gerçekleştiği için kullanıcı deneyimi çok daha hızlı ve akıcı olur.

JavaScript ile HTML Elemanlarını Seçme

Bir HTML elemanı üzerinde değişiklik yapmadan önce, o elemanı JavaScript tarafında “yakalamanız” gerekir. Eskiden sınırlı yöntemler varken, günümüzde CSS seçicilerini kullanan çok güçlü fonksiyonlar bulunmaktadır. JavaScript ile eleman seçme süreci, kodunuzun performansını ve okunabilirliğini doğrudan etkiler.

En Çok Kullanılan Seçim Yöntemleri

JavaScript’te bir elemanı seçmek için document nesnesinin sunduğu metodları kullanırız. İşte her yazılımcının bilmesi gereken temel seçiciler:

• getElementById: Sadece belirli bir ID’ye sahip elemanı seçer. Çok hızlı çalışır.
• getElementsByClassName: Belirli bir sınıfa (class) sahip tüm elemanları bir liste olarak döndürür.
• querySelector: CSS seçici mantığıyla (nokta, diyez, etiket adı) ilk eşleşen elemanı seçer.
• querySelectorAll: CSS seçicisiyle eşleşen tüm elemanları bir NodeList (dizi benzeri yapı) olarak getirir.

// ID ile seçme
const baslik = document.getElementById('ana-baslik');

// Class ile seçme
const butonlar = document.getElementsByClassName('btn-kayit');

// Modern yöntem (CSS seçicisi)
const ilkParagraf = document.querySelector('.metin-alani p');
const tumListeler = document.querySelectorAll('ul li');

İçerik ve Stil Manipülasyonu Nasıl Yapılır?

Elemanı seçtikten sonra en sık yapılan işlem, o elemanın içindeki metni veya CSS özelliklerini değiştirmektir. Örneğin, bir hata mesajını kırmızı renkte göstermek veya bir kullanıcının adını ekrana yazdırmak bu kapsama girer. İçerik değiştirirken iki ana özelliğimiz vardır: textContent ve innerHTML.

textContent ve innerHTML Arasındaki Fark

İki özellik de metin değiştirmeye yarasa da aralarında güvenlik ve işlevsellik açısından büyük farklar vardır. textContent sadece düz metin olarak işlem yaparken, innerHTML yazdığınız HTML etiketlerini tarayıcıya yorumlatır.

JavaScript ile CSS Değiştirme

Bir elemanın stilini değiştirmek için style özelliğini kullanırız. JavaScript’te CSS özellikleri yazılırken “camelCase” kuralı uygulanır. Yani CSS’deki background-color, JavaScript’te backgroundColor haline gelir.

const kutu = document.querySelector('.kutu');

// İçerik değiştirme
kutu.textContent = 'Yeni İçerik Eklendi!';

// Stil değiştirme
kutu.style.backgroundColor = 'blue';

kutu.style.color = 'white';
kutu.style.padding = '20px';

Olay Dinleyiciler (Event Listeners) ile Etkileşim

Statik bir sayfayı dinamik hale getiren asıl güç, olaylardır. Bir kullanıcının butona tıklaması, faresini bir resmin üzerine getirmesi veya klavyeden bir tuşa basması birer “olay”dır (event). JavaScript bu olayları dinleyebilir ve gerçekleştiğinde belirli bir kod bloğunu çalıştırabilir.

addEventListener fonksiyonu, modern JavaScript dünyasında olayları yönetmek için kullanılan en sağlıklı yöntemdir. Bu fonksiyon iki temel parametre alır: Olayın adı (click, submit, vb.) ve olay gerçekleştiğinde çalışacak fonksiyon.

let sayac = 0;
const buton = document.querySelector('#artir-btn');
const sonuc = document.querySelector('#sonuc-ekrani');

buton.addEventListener('click', function() {
    sayac++;
    sonuc.textContent = 'Toplam Tıklama: ' + sayac;
    sonuc.style.fontWeight = 'bold';
});

Yeni Eleman Oluşturma ve Silme Süreçleri

Bazen sayfada halihazırda var olan bir elemanı değiştirmek yetmez; yeni elemanlar oluşturmanız veya eskileri kaldırmanız gerekir. Örneğin, bir “Yapılacaklar Listesi” uygulamasında her yeni görev eklendiğinde DOM’a yeni bir <li> elemanı eklenmesi gerekir.

Adım Adım Yeni Eleman Ekleme

1. createElement: Yeni bir HTML etiketi oluşturun.
2. textContent/innerHTML: Oluşturulan elemanın içine içerik ekleyin.
3. appendChild/prepend: Elemanı sayfadaki bir ebeveyn (parent) elemanın içine yerleştirin.

const liste = document.querySelector('#gorev-listesi');
const yeniGorev = document.createElement('li');

yeniGorev.textContent = 'Kitap Oku';
yeniGorev.classList.add('liste-item'); // Class ekleme

liste.appendChild(yeniGorev); // Listenin sonuna ekler

Bir elemanı silmek isterseniz, remove() metodunu kullanabilirsiniz. Bu metod, çağrıldığı elemanı tamamen DOM ağacından kaldırır. Örneğin, bir butona tıklandığında ilgili satırın silinmesi bu yöntemle yapılır.

Sınıf (Class) Yönetimi ve ClassList Kullanımı

JavaScript ile doğrudan CSS özellikleri yazmak (style.color gibi) bazen kodun karmaşıklaşmasına neden olur. Bunun yerine, CSS tarafında hazırladığınız sınıfları JavaScript ile açıp kapatmak çok daha profesyonel bir yaklaşımdır. classList özelliği bu noktada imdadımıza yetişir.

• classList.add(‘sinif-adi’): Elemana yeni bir sınıf ekler.
• classList.remove(‘sinif-adi’): Eleman üzerindeki sınıfı siler.
• classList.toggle(‘sinif-adi’): Sınıf varsa siler, yoksa ekler (Örn: Gece modu butonu).
• classList.contains(‘sinif-adi’): Elemanın o sınıfa sahip olup olmadığını kontrol eder.

Öğrendiklerinizi Pekiştirin

JavaScript ile DOM manipülasyonu yapmak başlangıçta karmaşık görünebilir ancak pratik yaptıkça mantığı oldukça basittir. Önce bir elemanı seçersiniz, sonra üzerinde bir değişiklik yaparsınız veya bir olay dinleyicisi eklersiniz. Bu döngü, web geliştirmenin temel taşını oluşturur.

Kendi projelerinizde küçük adımlarla başlayın. Örneğin, bir buton ile sayfanın arka plan rengini değiştiren basit bir uygulama yapın. Ardından, bir liste oluşturup bu listeye dinamik olarak eleman ekleyip çıkaran daha gelişmiş sistemler kurun. Unutmayın, en iyi kod yazarak öğrenilir. Hata yapmaktan çekinmeyin; tarayıcınızın konsol (Console) sekmesi size nerede hata yaptığınızı söyleyecektir.