Giriş: DOM nedir ve neden önemlidir?

DOM (Document Object Model), bir web sayfasının yapısını ağaç biçiminde temsil eden nesne modelidir. JavaScript ile DOM üzerinde işlem yaparak sayfayı dinamik hale getirebilir, kullanıcı etkileşimlerine göre içerik değiştirebilir veya yeni öğeler ekleyebilirsiniz. Temel tanım ve yaklaşım için bkz. Codecademy'nin DOM açıklaması.

DOM öğelerini seçmek, değiştirmek ve yönetmek modern web geliştirmenin sık yapılan görevlerindendir; bu işlemler kullanıcı deneyimini zenginleştirir ve sayfayı interaktif hâle getirir.

Kaynak: JavaScript DOM Manipulation — Codecademy

Öğe seçme yöntemleri

DOM'da öğe seçmek için birden çok yöntem vardır. Doğru seçim yöntemi, hedeflediğiniz öğenin yapısına ve performans gereksinimlerinize bağlıdır. Aşağıda yaygın yöntemler ve kısa açıklamaları yer alıyor.

getElementById()

ID ile tek bir öğeyi seçer. En hızlı ve doğrudan yöntemlerden biridir; aynı sayfada tekil ID kullanımı varsayımına dayanır.

const baslik = document.getElementById('baslik');

Bu yöntem, sayfada ilgili ID varsa o öğeyi döner. Birden fazla öğede aynı ID olmamalıdır.

getElementsByClassName() ve getElementsByTagName()

Bu yöntemler canlı HTMLCollection döner; yani DOM değişirse koleksiyon güncellenir. Sınıf adı veya etiket adına göre seçime uygundur.

const kartlar = document.getElementsByClassName('card'); const paragraflar = document.getElementsByTagName('p');

querySelector() ve querySelectorAll()

CSS seçicileri kullanarak öğe seçmeye olanak verir. querySelector ilk eşleşeni, querySelectorAll tüm eşleşenleri (NodeList) döner. Çok yönlü ve okunması kolay bir yaklaşımdır.

const ilkBaslik = document.querySelector('.card .title'); const tumBasliklar = document.querySelectorAll('.card .title');

Kaynak: JavaScript DOM Tutorial — JavaScript Tutorial

İçerik güncelleme: textContent vs innerHTML

Bir öğenin içeriğini değiştirmek için iki sık kullanılan yol vardır: textContent ve innerHTML. Aralarındaki farkları anlamak önemlidir.

  • textContent: Öğenin düz metin içeriğini ayarlar veya okur. HTML etiketlerini metin olarak ekler; içerik HTML olarak işlenmez.
  • innerHTML: Öğenin HTML içeriğini ayarlar veya okur. HTML stringleri parse edilerek DOM'a dönüştürülür.

Örnekler:

document.getElementById('baslik').textContent = 'Yeni Başlık'; // veya const liste = document.getElementById('liste'); liste.innerHTML = "<li>İlk öğe</li><li>İkinci öğe</li>";

innerHTML kullanırken, özellikle kullanıcı girdisini doğrudan ekliyorsanız XSS (cross-site scripting) risklerini göz önünde bulundurun. Güvenilir olmayan verileri doğrudan innerHTML ile eklememek iyi bir uygulamadır.

Kaynak: Manipulating DOM Elements — JavaScript Tutorial

Öğeler ekleme, taşıma ve silme

Yeni öğe oluşturmak ve DOM'a eklemek için yaygın adımlar şunlardır:

  1. document.createElement() ile yeni bir öğe oluşturun.
  2. element.textContent veya element.innerHTML ile içerik ekleyin.
  3. parent.appendChild() veya parent.insertBefore() ile DOM'a iliştirin.
const li = document.createElement('li'); li.textContent = 'Yeni madde'; document.getElementById('liste').appendChild(li);

Bir öğeyi silmek için modern tarayıcılarda element.remove() kullanılabilir veya eski yöntemlerle parentNode.removeChild(element) tercih edilir.

Etkileşim örneği: düğme ile içerik değiştirme

Olay dinleyicileri (event listeners) ile kullanıcı etkileşimlerine tepki verebilirsiniz. Aşağıdaki örnek, bir butona tıklandığında başlığı değiştiren basit bir yaklaşımı gösterir.

const btn = document.getElementById('degistir'); btn.addEventListener('click', () => { document.getElementById('baslik').textContent = 'Tıklandı — Başlık güncellendi'; });

Bu örnek, DOM seçimi, olay bağlama ve içerik güncelleme adımlarını birleştirir.

Performans ve iyi uygulamalar

DOM manipülasyonları tarayıcı yeniden çizimine (reflow/repaint) neden olabilir. Çok sayıda DOM işlemi gerekiyorsa şu yaklaşımlar performansı artırır:

  • Değişiklikleri bir arada uygulamak için DocumentFragment kullanın veya öğeyi belgeden geçici olarak ayırarak güncelleyin.
  • querySelector ve benzeri seçicileri gerektiğinde önbelleğe alın; aynı öğeyi tekrar tekrar seçmekten kaçının.
  • innerHTML ile büyük HTML blokları eklerken tek bir atama yaparak tekrar tekrar DOM manipülasyonunu azaltın.

Bu hususlar, kullanıcıya daha akıcı bir deneyim sağlamak için önemlidir.

Adım adım: Basit bir "Görev Ekle" örneği

Aşağıdaki akış, minimal HTML varsayımıyla bir görev ekleme işlevinin mantığını gösterir. (HTML elemanları: input id="yeni-gorev", button id="ekleBtn", ul id="gorevListesi".)

  1. Butona tıklandığında input değerini okuyun: const val = document.getElementById('yeni-gorev').value;
  2. Yeni bir li öğesi oluşturun: const li = document.createElement('li'); li.textContent = val;
  3. Listeye ekleyin: document.getElementById('gorevListesi').appendChild(li);
  4. Input'u temizleyin ve odaklayın: input.value = ''; input.focus();
document.getElementById('ekleBtn').addEventListener('click', () => { const input = document.getElementById('yeni-gorev'); const val = input.value.trim(); if (!val) return; // boşsa ekleme yapma const li = document.createElement('li'); li.textContent = val; document.getElementById('gorevListesi').appendChild(li); input.value = ''; input.focus(); });

Bu örnek, DOM seçme, yeni öğe oluşturma, içerik atama ve ekleme adımlarını birleştirir. Daha gelişmiş versiyonlarda görev silme, düzenleme veya localStorage ile kalıcılık ekleyebilirsiniz.

Sık yapılan hatalar ve çözümler

  • DOM yüklü değilken seçim yapmak: Kodun DOMContentLoaded veya window.onload sonrası çalıştığından emin olun.
  • Yanlış seçici kullanımı: querySelectorAll NodeList döner; döngü veya forEach ile erişin.
  • innerHTML ile kullanıcı verisi eklemek: Kullanıcı girdisini doğrudan innerHTML ile eklemek XSS riski doğurabilir; mümkünse textContent kullanın.

Ek kaynaklar ve daha fazla okuma: DOM ve manipulasyon teknikleri hakkında derinlemesine kılavuzlar için JavaScript Tutorial ve Codecademy sayfalarına bakabilirsiniz.