DOM nedir ve neden önemlidir?

DOM (Document Object Model), bir HTML belgesinin JavaScript tarafından okunup değiştirilebilen ağaç yapısıdır. Bu yapı sayesinde sayfadaki elementleri seçebilir, içeriğini güncelleyebilir, yeni elemanlar ekleyebilir veya var olanları kaldırabilirsiniz. Temel kavramlar ve giriş için bakınız: JavaScript DOM - Document Object Model.

Element seçme yöntemleri

Bir DOM işlemi yapmadan önce hedef elemanı doğru seçmek önemlidir. En çok kullanılan yöntemler şunlardır:

• document.getElementById('id') — id ile tek eleman seçer.
• document.getElementsByClassName('class') — verilen sınıfa sahip tüm elemanları döndüren HTMLCollection.
• document.getElementsByTagName('tag') — etiket adına göre eleman listesi döndürür.
• document.querySelector(selector) — CSS seçici ile ilk eşleşeni döndürür.
• document.querySelectorAll(selector) — CSS seçici ile tüm eşleşenleri (NodeList) döndürür.

DOM Fundamentals kaynağı, querySelector ve querySelectorAll kullanımının pratik örneklerini ve farklarını açıklar: querySelector ilk eşleşeni; querySelectorAll ise eşleşen tüm elemanları döndürür.

Seçim örnekleri

Örnek:
const title = document.getElementById('site-title');
const buttons = document.querySelectorAll('.btn');
const firstItem = document.querySelector('ul li');

NodeList ile çalışmak

querySelectorAll ile dönen koleksiyon üzerinde forEach doğrudan çalışabilir veya Array.from ile gerçek diziye çevrilip daha fazla dizi metodu kullanılabilir:

Array.from(document.querySelectorAll('.item')).forEach(el => { /* işleme */ });

İçerik alma ve değiştirme: innerHTML, textContent, innerText

Bir elemanın içeriğini okumak veya değiştirmek için birkaç farklı özellik vardır. Doğru seçimin güvenlik ve performans açısından etkisi büyüktür:

• innerHTML — elemanın HTML içeriğini alır veya ayarlar. HTML etiketlerini işler; HTML string'i olarak verildiğinde tarayıcı bu içeriği HTML olarak parse eder.
• textContent — elemanın yalnızca düz metin içeriğini alır veya ayarlar; HTML etiketleri metin olarak değerlendirilir.
• innerText — textContent'e benzer, ama görünürlük ve stil bilgilerine bağlı davranabilir; gizli elementleri hesaba katmayabilir.

innerHTML ve textContent arasındaki farklar, kullanım senaryonuz için belirleyicidir. Kullanıcı girdileri veya dış veriler söz konusuysa textContent genellikle daha güvenlidir; innerHTML ile çalışırken XSS risklerini göz önünde bulundurmalısınız. Karşılaştırma ve güvenlik notları için bkz.: JavaScript DOM Manipulation.

Basit örnek

Örnek:
content.innerHTML = '<strong>Vurgu</strong> Metin'; // HTML olarak ekler
content.textContent = 'Vurgu Metin'; // düz metin olarak ekler

Sınıf ve öznitelik yönetimi

Elemanların sınıflarını ve özniteliklerini yönetmek sık yapılan işlerdendir:

• element.classList.add('is-active'), remove, toggle, contains gibi kolay metotlar sağlar.
• element.setAttribute('data-id', '123') ve element.getAttribute('href') öznitelik yönetimi için kullanılır.
• element.dataset kısa yoldur: data-* özniteliklerine erişim sağlar.

Örnek:
button.classList.toggle('expanded');
link.setAttribute('target', '_blank');

Eleman ekleme, değiştirme ve kaldırma

Yeni eleman eklemek için en güvenli yol createElement + appendChild yaklaşımıdır. HTML string kullanmak gerekiyorsa (ör. şablonla hızlı ekleme), insertAdjacentHTML işinizi görür; fakat string tabanlı eklemeler güvenlik riskleri taşır.

Örnek: createElement ile dinamik öğe

Örnek:
const li = document.createElement('li');
li.textContent = text;
list.appendChild(li);

Örnek: insertAdjacentHTML

list.insertAdjacentHTML('beforeend', '<li><strong>'+escapedText+'</strong></li>'); // HTML string kullanımı

Event handling ve delegation (olay delege etme)

Birçok dinamik öğe oluşturduğunuzda her biri için ayrı dinleyici eklemek yerine olay delege etme (event delegation) kullanmak daha verimlidir. Bu yöntemde üst kapsayıcıya bir dinleyici eklenir ve event.target üzerinden hangi alt elemanın tıklanıp tıklanmadığı belirlenir.

Örnek (liste içinde silme butonu):
list.addEventListener('click', function(e) {
if (e.target && e.target.matches('.delete-btn')) {
const item = e.target.closest('li');
if (item) item.remove();
}
});

Toplu ekleme ve performans ipuçları

Birden çok öğeyi tek tek DOM'a eklemek yerine:

• DocumentFragment kullanın: tüm öğeleri fragmente ekleyip sonra fragmanı DOM'a eklemek reflow/repaint sayılarını azaltır.
• Tek seferde innerHTML atamak performanslı olabilir ama güvenlik ve markup doğruysa tercih edilmelidir.
• DOM sorgularını (querySelector vb.) gerektiği kadar yapın; aynı elemanı tekrar tekrar seçmekten kaçının—değişken olarak saklayın.

Örnek DocumentFragment:
const frag = document.createDocumentFragment();
items.forEach(t => { const li = document.createElement('li'); li.textContent = t; frag.appendChild(li); });
list.appendChild(frag);

Güvenlik: XSS ve iyi uygulamalar

HTML string'leri doğrudan eklemek (innerHTML, insertAdjacentHTML) XSS riskini beraberinde getirebilir. Kullanıcı kaynaklı verileri HTML olarak eklemek gerekiyorsa, veriyi sanitize eden güvenilir bir kütüphane veya sunucu tarafı doğrulama/sanitizasyon uygulanmalıdır. Aksi halde, kötü amaçlı script çalıştırılabilir. Bu konuda daha fazla bilgi için bkz.: JavaScript DOM Manipulation.

Adım adım pratik örnek: To‑Do listesi (silme butonlu)

HTML (örnek):
<form id="todo-form"><input id="todo-input" /><button type="submit">Ekle</button></form><ul id="todo-list"></ul>

JS (özet):
form.addEventListener('submit', function(e) {
e.preventDefault();
const text = input.value.trim();
if (!text) return;
const li = document.createElement('li');
li.textContent = text;
const btn = document.createElement('button'); btn.textContent = 'Sil'; btn.classList.add('delete-btn');
li.appendChild(btn);
list.appendChild(li);
input.value = '';
});
// Olay delege etme ile silme
list.addEventListener('click', function(e) { if (e.target.matches('.delete-btn')) e.target.closest('li').remove(); });

Kontrol listesi (hızlı)

• Doğru seçim metodunu kullanın (id için getElementById, CSS seçiciler için querySelector).
• Kullanıcı verisini gösterirken textContent tercih edin.
• HTML string eklemeden önce veriyi sanitize edin veya güvenilir kaynak kullanın.
• Çok sayıda öğe eklerken DocumentFragment veya tek seferde güncelleme kullanın.
• Elementlerin null olma durumlarını kontrol edin ve hata sağlaması ekleyin.

Kaynaklar ve ileri okuma

• JavaScript DOM - Document Object Model — DOM'un ne olduğu ve temel kavramlar.
• DOM Fundamentals — seçim yöntemleri ve pratik örnekler.
• JavaScript DOM Manipulation — innerHTML, textContent ve innerText karşılaştırması ve güvenlik notları.