DOM ile element seçme ve güncelleme: 5 kısa örnek

Web sayfalarında dinamik değişiklikler yapmak için Document Object Model (DOM) ile çalışmak temel bir beceridir. Bu rehberde modern tarayıcılarda sık kullanılan seçme ve güncelleme yöntemlerini kısa, uygulamalı örneklerle göstereceğim. Örnekler basit ve pratik olacak; gerçek projeye uygularken tarayıcı uyumluluğu ve güvenlik kontrollerini unutmayın.

Bu makalede ele alınan temel kavramlar ve kullanım notları için bakabilirsiniz: TechLead — DOM rehberi, JavaScript Tutorial — textContent ve Dev Handbook — DOM manipülasyonu.

Temel yöntemler: kısa referans

Yöntem Kısa açıklama
document.querySelector(selector) CSS seçici kullanarak DOM'daki ilk eşleşen elementi döndürür. (ilk eşleşme)
document.querySelectorAll(selector) CSS seçici ile eşleşen tüm elementleri NodeList olarak döndürür; üzerinde döngü ile işlem yapılır.
element.textContent Elementin metin içeriğini güvenli şekilde alıp/ayarlamak için kullanılır; ham HTML yorumlanmaz.
element.innerHTML Elementin HTML içeriğini alıp/ayarlamak için kullanılır; HTML işlenir — bu sebeple kullanırken dikkat gerekir.
document.createElement / parent.appendChild Yeni bir element oluşturup DOM'a eklemek için kullanılır.
element.classList / setAttribute CSS sınıfı ekleme/çıkartma ve attribute (örn. src, alt) güncelleme için kullanılır.

Bu yöntemlerin detaylı açıklamaları ve örnekleri için kaynaklara göz atabilirsiniz: TechLead, JavaScript Tutorial, Dev Handbook.

Örnek 1 — document.querySelector ile tek elementi seçip textContent güncelleme

  1. const heading = document.querySelector('h1.site-title');
  2. if (heading) heading.textContent = 'Yeni Başlık';

Açıklama: querySelector ilk eşleşeni döndürür; yoksa null gelir. Bu nedenle doğrudan erişmeden önce null kontrolü yapın. Sadece düz metin ekliyorsanız textContent kullanmak daha güvenlidir (HTML olarak yorumlanmaz). Kaynak: JavaScript Tutorial.

Örnek 2 — querySelectorAll ile birden çok elementi güncelleme

  1. const items = document.querySelectorAll('.todo .item');
  2. items.forEach((el, i) => el.textContent = `${i + 1}. ${el.textContent}`);

Açıklama: querySelectorAll bir NodeList döndürür; modern tarayıcılarda NodeList üzerinde forEach çalışır. Daha geniş uyumluluk için Array.from(items) ile diziye çevirebilirsiniz. Bu örnek, bir liste öğelerini numaralandırmak için kullanışlıdır. Kaynak: TechLead.

Örnek 3 — createElement ve appendChild ile yeni element ekleme

  1. const li = document.createElement('li');
  2. li.textContent = 'Yeni madde';
  3. const list = document.querySelector('#list');
  4. if (list) list.appendChild(li);

Açıklama: createElement ile oluşturulan elementin içeriğini textContent ile ayarlamak, HTML enjeksiyonunu engeller. Ardından appendChild veya insertAdjacentElement ile DOM'a ekleyebilirsiniz. Kaynak: Dev Handbook.

Örnek 4 — innerHTML kullanımı ve daha güvenli alternatif

  1. const container = document.querySelector('#container');
  2. if (container) container.innerHTML = '<p><strong>Merhaba</strong></p>';

Açıklama: innerHTML HTML içeriğini direkt olarak işlediği için hızlı ve pratiktir, ancak dışarıdan gelen ham HTML (özellikle kullanıcı girdisi) doğrudan eklendiğinde risk oluşturabilir. Mümkünse HTML içeriğini sunucu tarafında temizleyin veya DOM API'si ile element/tekst oluşturun:

  1. const p = document.createElement('p');
  2. p.textContent = 'Merhaba';
  3. container.appendChild(p);

Daha fazla bilgi için: Dev Handbook, güvenlik notları için ilgili kaynaklara bakabilirsiniz.

Örnek 5 — attribute ve classList güncelleme (resim örneği)

  1. const img = document.querySelector('#hero img');
  2. if (img) {
  3.   img.setAttribute('alt', 'Açıklayıcı metin');
  4.   img.src = 'https://example.com/photo.jpg';
  5.   img.classList.toggle('visible');
  6. }

Açıklama: setAttribute ile attribute'ü güncelleyebilir veya doğrudan img.src gibi property atayabilirsiniz. classList ile sınıf ekleme/çıkarma/toggle işlemleri temiz ve okunaklıdır.

İyi uygulamalar ve ipuçları

  • Element seçmeden önce uygun bir seçici kullanın; id için #id, sınıf için .class.
  • Her zaman null kontrolü yapın: const el = document.querySelector(...); if (el) { ... }.
  • Plain metin için textContent, HTML eklemek gerektiğinde dikkatli innerHTML veya createElement kombinasyonu kullanın.
  • Birden fazla element için querySelectorAll sonrası forEach veya Array.from() kullanın.
  • Kullanıcıdan gelen veriyi doğrudan HTML olarak eklemeyin; sanitize veya DOM API ile güvenli ekleme tercih edin.

Hızlı kontrol listesi (checklist)

  • Seçici doğru mu? (id/class/tag)
  • Null kontrolü yapıldı mı?
  • Metin mi ekleniyor yoksa HTML mi? (textContent vs innerHTML)
  • Güvenlik: kullanıcı girdisi temizlendi mi?
  • Performans: sık DOM erişimleri gruplanıp tek seferde mi yapılıyor?

Sınırlamalar ve notlar

Örnekler modern tarayıcı ve ES6 desteği varsayar. Sunucu tarafı veya non-browser ortamlarında (ör. Node.js) DOM farklı kütüphaneler gerektirebilir (ör. jsdom). HTML içeriği eklerken güvenlik önemlidir; bu yazıda güvenlik tavsiyeleri özetlenmiştir fakat uygulamaya özel değerlendirme ve testler yapmanız önerilir.

Kaynaklar ve ileri okuma

Daha detaylı rehberler:

Uygulamalı örnekleri kendi sayfanıza kopyalayıp test ederken geliştirici konsolunu kullanın ve değişiklikleri adım adım doğrulayın.