DOM Manipülasyonu: 7 Kısa JavaScript Örneği ile Adım Adım

DOM Manipülasyonu: 7 Kısa JavaScript Örneği ile Adım Adım

Document Object Model (DOM), bir web sayfasının yapısını nesneler/hiyerarşi olarak temsil eder ve JavaScript ile bu yapı üzerinde değişiklik yaparak sayfaları dinamik hâle getirebilirsiniz. DOM'un ne olduğu ve temel kavramlara giriş için Emre Demir ve 1Kodum'daki özetler faydalıdır (Emre Demir, 1Kodum).

Hızlı Özet: Sık Kullanılan API'ler

DOM ile çalışırken yaygın kullanılan yöntemler şunlardır: getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll. İçerik değiştirmek için textContent, innerText ve innerHTML; stil ve sınıf yönetimi için style ve classList; yeni eleman eklemek için createElement, appendChild, insertBefore; olay eklemek için addEventListener kullanılır (Technopat).

Nasıl Başlanır? Kısa Hazırlık

• Basit bir HTML dosyası açın veya tarayıcı konsolunda test edin.
• Denemeler için şu minimal yapıyı kullanabilirsiniz: <div id="app"></div>.
• Değişiklikleri doğrudan tarayıcı konsolunda veya ayrı bir .js dosyasında çalıştırın.

7 Kısa Örnek — Her biri adım adım

1) Element Seçme

Açıklama: Önce DOM'da hangi öğeyle çalışacağınızı seçmelisiniz. Farklı seçim metodları farklı durumlar için uygundur.

Kod:
const app = document.getElementById('app');
const btn = document.querySelector('.btn');
const items = document.querySelectorAll('li');

Notlar: querySelectorAll NodeList döner; üzerinde forEach çalıştırabilirsiniz. getElementsByClassName canlı (live) bir HTMLCollection dönebilir; bu farklar davranışı etkileyebilir (Technopat).

2) İçerik Değiştirme

Açıklama: Metin veya HTML içeriğini değiştirmek için üç yaygın seçenek vardır. Hangi duruma uygun olduğunu bilin.

Kod:
const title = document.querySelector('h1');
title.textContent = 'Yeni Başlık';
title.innerHTML = '<em>Vurgulu</em> Başlık';

İpuçları: textContent düz metin ekler; innerHTML HTML yorumlanır. Eğer kullanıcıdan gelen veri doğrudan HTML olarak yerleştirilecekse, veri temizlenmeli veya şablonlama tercih edilmelidir; aksi hâlde güvenlikle ilgili sorunlar çıkabilir (Technopat).

3) Stil ve Sınıf Yönetimi

Açıklama: Tek seferlik stil değişiklikleri için style, CSS sınıflarıyla yönetim için classList kullanın.

Kod:
const box = document.querySelector('.box');
box.style.backgroundColor = 'lightblue';
box.classList.add('active');
box.classList.toggle('hidden');

Pratik: Birden fazla stil değişikliği gerektiğinde doğrudan stil atamak yerine sınıf eklemek/çıkarmak genelde daha düzenlidir.

4) Yeni Eleman Oluşturma ve Ekleme

Açıklama: Dinamik liste veya içerik oluşturmak için element yaratıp DOM'a ekleyin.

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

İleri seviye: Birden çok öğe ekliyorsanız DocumentFragment kullanmak performansı iyileştirir çünkü bir kerede tek append yapılır.

5) Olay Dinleyicileri (Event Listeners)

Açıklama: Kullanıcı etkileşimleri için addEventListener kullanın; olay delegasyonu büyük DOM listelerinde avantaj sağlar.

Kod:
const btn = document.querySelector('#save');
btn.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('Kaydet tıklandı');
});

Delegasyon örneği: Çok sayıda öğe için ana kapsayıcıya tek bir click dinleyicisi ekleyip event.target.matches('.item') ile hedefi kontrol etmek performans ve yönetim açısından faydalıdır (Legal Yazılım).

6) Form Verisi Okuma ve Basit Doğrulama

Açıklama: Form gönderiminde veriyi alıp kontrol etmek ve gerektiğinde gönderimi engellemek sık yapılan bir işlemdir.

Kod:
const form = document.querySelector('#form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const name = form.querySelector('input[name="name"]').value;
  if (!name.trim()) { alert('İsim gerekli'); return; }
  console.log('Gönderiliyor:', name);
});

Uyarı: Tarayıcı taraflı doğrulama kullanıcı deneyimi için iyidir; ancak sunucu tarafında da doğrulama yapılmalıdır.

7) Eleman Kaldırma ve Yeniden Düzenleme

Açıklama: Bir öğeyi kaldırmak veya başka bir konuma taşımak gerektiğinde DOM API'sini kullanın.

Kod:
const item = document.querySelector('.to-remove');
item.remove();
// Alternatif: item.parentNode.removeChild(item);

Açıklama: remove() modern tarayıcılarda çalışır; daha eski destek gerekiyorsa parentNode.removeChild kullanımı bir alternatiftir.

İyi Uygulamalar (Checklist)

• Seçimleri önbelleğe alın: aynı öğeyi tekrar tekrar seçmek yerine bir değişkene atayın.
• DOM yazma işlemlerini gruplayın: önce veri hazırlayın, sonra tek seferde DOM'a yansıtın (DocumentFragment faydalı).
• innerHTML yerine textContent kullanın; gerçekten HTML gerekiyorsa girdi temizlenmeli veya güvenli şablonlama tercih edilmelidir.
• Büyük listelerde olay delegasyonu kullanın.

Hata Ayıklama ve Performans İpuçları

Tarayıcı geliştirici araçlarını (Elements, Console, Performance) kullanarak DOM değişikliklerinin etkisini izleyin. console.log ile ara değerleri kontrol edebilir, breakpoint ile fonksiyon akışını inceleyebilirsiniz. Çok sayıda stil değişikliği yaparken yeniden akış (reflow) ve yeniden çizim (repaint) maliyetlerini azaltmaya çalışın.

Kaynakça ve İleri Okuma

• Rehber: JavaScript ile DOM Manipülasyonu — Technopat
• JavaScript'de DOM Manipulation nedir? — Emre Demir
• Javascript Dom Manipülasyonu ve Olaylar — Legal Yazılım
• JavaScript DOM Nedir? — 1Kodum

Sık Sorulan Sorular

• DOM ile veri depolamak güvenli midir?

  DOM, kullanıcı arayüzü için uygundur ancak hassas verileri (şifre, kredi kartı vb.) doğrudan DOM'da tutmaktan kaçının; bu tür veriler güvenli saklama çözümlerinde olmalıdır.

• querySelector ile getElementById arasındaki fark nedir?

  querySelector CSS seçici sözdizimini destekler ve ilk eşleşeni döndürür; getElementById ise id ile doğrudan erişim sağlar ve daha hızlı olabilir. İhtiyaca göre her ikisi de kullanılabilir.

• innerHTML ne zaman tercih edilmeli?

  HTML yapısını dinamik oluşturmak gerekiyorsa innerHTML kullanılabilir; ancak kullanıcı girdisi içeriyorsa girdi öncesi temizleme veya şablonlama tercih edilmelidir.