Giriş: DOM nedir ve neden önemli?

DOM (Document Object Model), bir web sayfasının yapısını JavaScript tarafından okunup değiştirilebilen bir ağaç halinde temsil eder. Bu temsil, sayfadaki öğeleri seçmeyi, içeriği güncellemeyi, yeni eleman eklemeyi veya var olanları silmeyi mümkün kılar. Temel tanım ve yöntemler için Programming Line ve KissJS kaynaklarına bakabilirsiniz.

Temel kavramlar

DOM manipülasyonuna başlamadan önce birkaç terime aşina olun:

  • Document: Sayfanın kök düğümü, genellikle document üzerinden erişilir.
  • Element: HTML etiketlerinin temsilcileri (ör. div, button).
  • NodeList / HTMLCollection: querySelectorAll gibi metotların döndürdüğü öğe listeleri.
  • Event: Kullanıcı etkileşimleri (click, input vb.) ve bunlara verilen yanıtlar.

8 Pratik JavaScript Örneği

1) Öğeleri seçme — getElementById, querySelector, querySelectorAll

Öğeleri seçmenin hızlı yolları:

Örnek:
const btn = document.getElementById('saveBtn');
const firstItem = document.querySelector('.item');
const items = document.querySelectorAll('.item');

Not: querySelectorAll bir NodeList döndürür; tekrar eden işlemler için Array.from(items) ile diziye çevirebilirsiniz. Bu seçme yöntemleri, dom manipülasyonu sırasında başlangıç adımıdır.

2) Metin ve HTML içeriğini değiştirme — textContent vs innerHTML

Örnek:
const title = document.querySelector('.title');
title.textContent = 'Yeni Başlık';

textContent yalnızca metni değiştirir ve DOM içinde HTML olarak yorumlanmaz. Eğer HTML içeriği eklemeniz gerekiyorsa innerHTML kullanılabilir, ancak kullanıcı kaynaklı veriyi doğrudan innerHTML ile eklemeden önce mutlaka temizlemelisiniz; aksi halde XSS gibi güvenlik riskleri ortaya çıkabilir. Daha fazla detay için freeCodeCamp makalesine bakabilirsiniz.

3) Sınıf yönetimi — classList ile add/remove/toggle

CSS sınıflarını yönetmek için classList en pratik yoldur.

Örnek:
const box = document.querySelector('.box');
box.classList.add('active');
box.classList.toggle('hidden');

Bu yöntem, stil değişikliklerini JavaScript ile kontrol etmenin temiz ve performanslı yoludur.

4) Yeni element oluşturma ve ekleme — createElement, appendChild

Dinamik içerik eklemek için yeni bir element oluşturup DOM'a ekleyebilirsiniz.

Örnek:
const li = document.createElement('li');
li.textContent = 'Yeni öğe';
document.querySelector('#list').appendChild(li);

Çok sayıda öğe ekliyorsanız, DocumentFragment kullanmak yeniden hesaplamaları azaltarak performansı iyileştirir.

5) Element silme — remove ve parent.removeChild

Bir öğeyi DOM'dan kaldırmanın iki yaygın yöntemi vardır:

Örnek:
const element = document.querySelector('.to-remove');
// Modern yöntem
element.remove();
// Veya eski yöntem
element.parentNode.removeChild(element);

Her iki yöntem de belirli durumlarda kullanışlıdır; modern tarayıcılarda remove() doğrudan işinizi görür.

6) Olay dinleyicileri — addEventListener ile davranış ekleme

Buton tıklamaları veya form gönderimleri gibi olayları yakalamak için addEventListener kullanılır.

Örnek:
const btn = document.getElementById('saveBtn');
btn.addEventListener('click', function(event) {
// event nesnesini kullanarak işlem yapın
console.log('Kaydet tuşuna basıldı');
});

Olay nesnesi (event) içinde ilgili hedef ve varsayılan davranış gibi bilgilere erişebilirsiniz.

7) Olay delegasyonu — parent üzerinden yönetim

Bir liste veya tablo gibi çok sayıda benzer öğe için ayrı ayrı dinleyici atamak yerine, ortak bir üst öğeye tek bir dinleyici koyup event.target ile hedefi kontrol etmek daha verimlidir.

Örnek:
const list = document.getElementById('list');
list.addEventListener('click', function(e) {
if (e.target && e.target.matches('li')) {
console.log('Liste öğesine tıklama:', e.target.textContent);
}
});

Bu yöntem, dinamizm içeren arayüzlerde bellek kullanımını azaltır ve yeni eklenen öğeler için ekstra kod yazmayı gereksiz kılar.

8) Form etkileşimi ve ön doğrulama — preventDefault ve FormData

Form gönderimini yakalayıp JavaScript ile işlemek için:

Örnek:
const form = document.getElementById('contactForm');
form.addEventListener('submit', function(e) {
e.preventDefault(); // gönderimi durdurur
const data = new FormData(this);
const name = data.get('name');
// sunucuya AJAX ile gönderme veya ek kontrol
});

Form verilerini FormData ile almak, dosya ve metin alanlarını kolayca yönetmeyi sağlar.

İyi uygulamalar ve performans ipuçları

  • Seçimleri yeniden kullanın: Aynı öğeyi tekrar tekrar seçmek yerine bir değişkene atayın.
  • Toplu güncellemeler için DocumentFragment veya bir tek parent üzerinde değişiklik yapın.
  • Çok sık çalışan olaylar (örn. scroll, input) için debouncing veya throttling uygulayın.
  • innerHTML kullanırken kullanıcı verisini sanitize edin; aksi halde güvenlik riski olabilir.
  • Event delegation ile gereksiz event listener'ları azaltın.

Hızlı kontrol listesi (deploy öncesi)

  • Seçimler doğru ve tekil mi? (ID için getElementById, birden çok öğe için querySelectorAll).
  • innerHTML kullanıyorsanız veri temizlenmiş mi?
  • Performans için gereksiz yeniden boyama/reflow önlendi mi?
  • Event listener'lar hafızada sızıntı yaratmayacak şekilde kaldırılıyor mu?

Kaynaklar ve ileri okuma

Not: Bu makaledeki örnekler öğrenme amaçlıdır; üretim ortamında kullanmadan önce tarayıcı desteği, erişilebilirlik ve güvenlik kontrollerini uygulayın.