Giriş: DOM nedir?

Document Object Model (DOM), bir web sayfasındaki HTML veya XML belgesinin tarayıcı tarafından bellek içinde ağaç yapısı olarak temsil edilmesidir. Bu yapı sayesinde JavaScript sayfadaki elementleri seçebilir, içeriklerini değiştirebilir, yeni elementler oluşturabilir veya öğeleri silebilir. Temel kavramlar ve öğrenmeye başlamak için Patika.dev ve 1Kodum gibi kaynaklar faydalıdır: Patika.dev, 1Kodum.

Neden DOM öğrenmelisiniz?

Modern web uygulamaları statik HTML'den öteye geçer; kullanıcı etkileşimine göre sayfa içeriği dinamik olarak değişir. DOM manipülasyonu, butonlara tıklama sonrası içeriği güncellemek, form verisi eklemek, liste oluşturmak gibi temel görevleri gerçekleştirir. DOM üzerinde rahatça çalışmak, etkileşimli kullanıcı deneyimleri oluşturmanın temelidir.

Element seçme yöntemleri

HTML belgelerinde element seçmek için birkaç yaygın metod vardır. Her birinin davranışı ve dönüş tipi farklıdır; doğru yöntemi seçmek hem okunabilirlik hem de performans açısından önemlidir.

getElementById()

getElementById() verilen ID değerine sahip tek bir elementi döndürür veya bulamazsa null döner. Hızlı ve yaygın bir yöntemdir.
Örnek:
var el = document.getElementById('myId');
if (el) { el.textContent = 'Merhaba'; }

getElementsByClassName() ve getElementsByTagName()

getElementsByClassName() belirtilen sınıfa sahip tüm elementleri bir live HTMLCollection olarak döndürür; koleksiyona sonradan DOM üzerinden eklenen/çıkarılan öğeler otomatik güncellenir. Benzer şekilde getElementsByTagName() tag adına göre bir HTMLCollection döndürür.
Örnek:
var items = document.getElementsByClassName('card');
for (var i = 0; i < items.length; i++) { /* items[i] ile işlemler */ }

querySelector() ve querySelectorAll()

querySelector() CSS seçicileri kullanarak eşleşen ilk elementi döndürür; querySelectorAll() ise eşleşen tüm elementleri statik bir NodeList olarak döndürür. NodeList üzerinde modern tarayıcılarda forEach kullanılabilir veya Array.from() ile diziye çevrilebilir. (Detaylı gezinme ve seçici davranışları için: JavaScript.info.)
Örnek:
var firstTitle = document.querySelector('.card .title');
var allItems = document.querySelectorAll('ul#list > li');
allItems.forEach(function(li) { console.log(li.textContent); });

İçerik değiştirme: textContent vs innerHTML

Element içeriğini değiştirmek için iki sık kullanılan özellik textContent ve innerHTML'dir. Aralarındaki farkı bilmek güvenli ve doğru kullanım için önemlidir.

Özellik textContent innerHTML
Ne yapar Elementin düz metin içeriğini getirir/değiştirir. Elementin HTML içeriğini getirir/değiştirir (etiketleri işler).
Kullanım örneği el.textContent = 'Merhaba'; el.innerHTML = '<strong>Merhaba</strong>';
Dikkat HTML etiketlerini metin olarak ekler; XSS riskine sebep olmaz. Kullanıcıdan gelen ham veriyi doğrudan eklemek XSS riskine yol açabilir; veri temizleme/sanitize önemlidir.

Genel kural: Sadece metin ekliyorsanız textContent daha güvenlidir ve beklenen sonucu verir. HTML yapısı eklemeniz gerekiyorsa innerHTML kullanılır, ancak dışarıdan gelen veriler mutlaka temizlenmelidir. Bu davranışların detayları için 1Kodum'daki açıklamalar faydalıdır: 1Kodum — DOM Nedir?

Yeni element oluşturma ve ekleme

Dinamik olarak element oluşturmak için document.createElement() kullanılır. Ardından içeriği ayarlanıp, DOM'da uygun bir yere eklenir.

Adımlar ve örnek:
var li = document.createElement('li');
li.textContent = 'Yeni madde';
var list = document.getElementById('todoList');
list.appendChild(li);

Birden fazla öğe eklerken performans için DocumentFragment kullanmak çoğu zaman daha iyidir: önce fragment'e ekleyin, sonra tek seferde DOM'a ekleyin. Çok sayıda eklemede bu yaklaşım yeniden hesaplamaları azaltır.

Pratik örnek: Basit To‑Do listesi

Varsayalım HTML tarafında şu elemanlar var (gösterim için < > karakterleri kaçışlı yazılmıştır):

<input id="newItem" type="text" />
<button id="addBtn">Ekle</button>
<ul id="todoList"></ul>

Basit ekleme işlevi (örnek JavaScript):
var input = document.querySelector('#newItem');
var btn = document.querySelector('#addBtn');
var list = document.querySelector('#todoList');
btn.addEventListener('click', function() {
var value = input.value.trim();
if (!value) return; // boşsa ekleme yapma
var li = document.createElement('li');
li.textContent = value;
list.appendChild(li);
input.value = '';
});

Bu örnekte querySelector ile elementler seçiliyor, createElement ile yeni öğe oluşturuluyor ve appendChild ile listeye ekleniyor.

Yaygın hatalar ve iyi uygulamalar

  • Her DOM sorgusunda aynı seçiciyi tekrar tekrar çalıştırmak yerine, element referanslarını değişkende saklayın (cache).
  • Yalnızca metin değiştirecekseniz textContent kullanın; HTML parse işlemi ve güvenlik risklerini azaltın.
  • innerHTML ile kullanıcı girdisini doğrudan eklemeyin; gerekiyorsa güvenli hale getirin veya sunucu tarafında sanitize edin.
  • Çok sayıda DOM değişikliği yapacaksanız DocumentFragment veya toplu ekleme yöntemleri kullanın.
  • Performans için karmaşık seçimler yerine mümkünse ID ile doğrudan erişim tercih edin.

Hızlı başvuru: sık kullanılan metodlar

MetodAçıklama
getElementById(id)Belirtilen ID'ye sahip tek elementi döndürür.
getElementsByClassName(name)Aynı sınıfa sahip elementlerin canlı koleksiyonunu döndürür.
querySelector(sel)CSS seçicisine göre ilk eşleşeni döndürür.
querySelectorAll(sel)Tüm eşleşen elementleri statik NodeList olarak döndürür.
createElement(tag)Yeni bir element oluşturur.
appendChild(node)Elemente çocuk olarak node ekler.
removeChild(node)Bir çocuğu kaldırır.
textContent / innerHTMLElement içeriğini metin veya HTML olarak ayarlar/okur.

Sonraki adımlar ve kaynaklar

DOM temelini kavradıktan sonra olay yönetimi (event handling), performans optimizasyonları ve modern kütüphanelerin (React, Vue gibi) sanal DOM yaklaşımlarına göz atmak faydalıdır. Aşağıdaki kaynaklar konunun resmi olmayan ama güvenilir açıklamalarını içerir:

Not: Bu makaledeki örnekler öğrenme amaçlıdır. Gerçek projelerde kullanıcı girdilerini her zaman temizlemeyi ve tarayıcı uyumluluğunu test etmeyi unutmayın.