DOM ile Temel Etkileşimler: Seçme, Değiştirme ve Güncelleme Örnekleri

DOM ile Temel Etkileşimler: Seçme, Değiştirme ve Güncelleme Örnekleri

Bu rehber, javascript başlangıç kodları arayan geliştiriciler için DOM (Document Object Model) üzerinde en sık kullanılan etkileşimleri adım adım gösterir. Seçme (selection), güncelleme ve yeni içerik ekleme işlemlerine odaklanacağız; ayrıca performans ve güvenlik adına dikkat etmeniz gereken noktaları paylaşacağım.

DOM nedir ve neden önemlidir?

DOM, bir web sayfasının HTML yapısını JavaScript aracılığıyla programatik olarak okuyup değiştirmeyi mümkün kılan soyut bir modeldir. Tarayıcılar DOM'u oluşturur ve JavaScript, bu model üzerinden elementleri seçip değiştirebilir. Daha teknik bilgiler için MDN'in ilgili sayfasına bakabilirsiniz: Document Object Model (MDN).

Element seçme: temel yöntemler

Bir element üzerinde işlem yapabilmek için önce onu seçmeniz gerekir. En yaygın yöntemler:

• document.querySelector(selector) — CSS seçici kullanır ve ilk eşleşeni döner.
• document.querySelectorAll(selector) — Tüm eşleşen elementleri NodeList olarak döner.
• document.getElementById(id) — id ile tek bir element seçer.
• document.getElementsByClassName(className) ve document.getElementsByTagName(tag) — canlı koleksiyonlar döndürür.

Pratik örnekler:

// id ile seçme
const title = document.getElementById('page-title');

// CSS seçici ile ilk elemanı seçme
const firstBtn = document.querySelector('.btn-primary');

// Tüm eşleşenleri seçme (NodeList)
const items = document.querySelectorAll('.todo-item');

Seçme ve gezinme (traversal) hakkında daha derin bilgi için MDN'in seçim ve dolaşım rehberine bakabilirsiniz: Selection and traversal on the DOM tree (MDN).

querySelector vs querySelectorAll — hangi durumda hangisini kullanmalı?

querySelector tek bir element gerektiğinde hızlı ve ifadeli bir yöntemdir. Birden fazla element üzerinde döngü yapacaksanız querySelectorAll kullanıp elde edilen NodeList üzerinde forEach ile ilerleyebilirsiniz. getElementsByClassName/getElementsByTagName ise canlı koleksiyon döndürdüğü için bazı durumlarda beklenmedik davranışlara yol açabilir; modern kodlarda querySelector* tercih edilir.

innerText, textContent ve innerHTML: farkları ve kullanım örnekleri

Bir elementin görünür metnini veya HTML içeriğini değiştirmek için üç yaygın özellik vardır:

• textContent: Elementin alt düğümlerinin metin içeriklerini ham haliyle döner veya ayarlar. Hızlıdır ve HTML etiketlerini metin olarak ekler.
• innerText: Tarayıcı tarafından render edilmiş, görünür metni verir; CSS tarafından gizlenen öğeleri hesaba katmaz.
• innerHTML: Elementin HTML içeriğini alır veya ayarlar; içerisine HTML yerleştirmek için kullanılır.

Kısa örnekler:

const p = document.querySelector('#summary');
// Sadece düz metin eklemek için güvenli ve hızlı
p.textContent = 'Yeni özet metni';

// HTML ile birlikte çalışmak istiyorsanız (dış kaynaktan gelen veriyle dikkatli olun)
p.innerHTML = 'Vurgulu metin';

Not: innerHTML dışarıdan gelen güvenilmeyen verilerle doğrudan kullanılırsa XSS (cross-site scripting) riskini artırabilir; kullanıcı girdilerini uygun şekilde kaçırmadan (escape) veya güvenli şablonlama ile kullanın.

Element özellikleri, sınıflar ve stiller nasıl güncellenir?

Elementlerin özniteliklarını, sınıflarını ve stillerini değiştirmek için birkaç pratik yol vardır:

• setAttribute / getAttribute / removeAttribute — HTML öznitelikleriyle çalışır.
• element.classList.add/remove/toggle/contains — sınıf yönetimi için modern ve güvenli yol.
• element.style. — doğrudan inline stil atamak için kullanılır.

const link = document.querySelector('#main-link');
link.setAttribute('href', 'https://example.com');
link.classList.add('is-active');
link.style.color = 'teal';

Yeni bir element oluşturma ve DOM'a ekleme

Dinamik içerik eklemek için document.createElement ve ekleme yöntemleri kullanılır. Birden fazla öğeyi performanslı eklerken DocumentFragment tercih edilmelidir.

// Tek eleman eklemek
const li = document.createElement('li');
li.textContent = 'Yeni öğe';
document.querySelector('#list').appendChild(li);

// Çok sayıda öğeyi topluca eklemek için DocumentFragment
const frag = document.createDocumentFragment();
for (let i = 0; i < 50; i++) {
const item = document.createElement('li');
item.textContent = 'Öğe ' + (i+1);
frag.appendChild(item);
}

Pratik örnek: basit bir görev (todo) listesini güncelleme

Aşağıdaki adımlar, bir form ile yeni görev ekleyen, görevleri işaretleyen ve silen basit bir akışı gösterir. (HTML yapınızda bir form, input ve bir ul listesi olduğunu varsayın.)

// Form submit ile yeni görev ekleme
const form = document.querySelector('#todo-form');
const input = document.querySelector('#todo-input');
const list = document.querySelector('#todo-list');

form.addEventListener('submit', function(e) {
e.preventDefault();
const text = input.value.trim();
if (!text) return; // boşsa çık
const li = document.createElement('li');
li.textContent = text;
// küçük bir buton ekleyelim
const del = document.createElement('button');
del.textContent = 'Sil';
del.addEventListener('click', () => li.remove());
li.appendChild(del);
list.appendChild(li);
input.value = '';
});

Bu örnek temel bir akış sağlar. Gerçek projelerde görevleri veri yapısında saklamak ve UI ile veri arasında senkronizasyon sağlamak önemlidir.

Performans ve iyi uygulamalar

• Seçimleri tekrar kullanın: Aynı elemente tekrar tekrar querySelector çağırmak yerine bir değişkende saklayın.
• Toplu DOM değişikliklerinde DocumentFragment kullanın.
• Yazma ve okuma işlemlerini birbirine karıştırmayın: Style veya layout ölçümleri (offsetHeight gibi) okuduktan sonra yazma yaparsanız tarayıcı tekrar düzenleme (reflow) yapabilir; mümkünse gruplayın.
• Animasyonlar için requestAnimationFrame kullanın.
• Kullanıcı girdilerini doğrudan innerHTML ile eklemeyin: metin eklemek için textContent kullanmak daha güvenlidir.

Hata ayıklama ve test etme

DevTools (Tarayıcı Geliştirici Araçları) ile elementleri seçip değişiklikleri canlı test edebilirsiniz. console.log ile seçtiğiniz elementleri kontrol edin ve hataları izleyin. Ayrıca farklı tarayıcılarda temel senaryoları test etmek iyi bir pratiktir.

---

Özet

DOM manipülasyonu temel JavaScript becerilerinden biridir. querySelector ve querySelectorAll modern kullanımda sık tercih edilir; textContent güvenli metin ekleme, innerHTML ise HTML içerik ekleme için kullanılır ancak dikkat gerektirir. Büyük eklemelerde DocumentFragment ve seçici önbellekleme performansı artırır. Daha fazla teknik referans için MDN kaynaklarını inceleyin.

Kaynaklar: Document Object Model — MDN ve Selection and traversal on the DOM tree — MDN.