DOM: Element seçme, sınıf ekleme ve içerik güncelleme örnekleri
JavaScript DOM Manipülasyonu
Giriş
Web sayfalarında dinamik değişiklikler yapmak için DOM (Document Object Model) manipülasyonu temel bir tekniktir. DOM, bir sayfanın HTML yapısını ağaç şeklinde temsil eder ve JavaScript ile bu ağaç üzerinden eleman seçme, sınıf yönetimi ve içerik güncelleme işlemleri yapılabilir. Temel kavramları ve pratik örnekleri bu rehberde adım adım göreceksiniz (temel referanslar arasında resmi ve öğretici kaynaklar yer alır).
Temel kavramlar: DOM nedir ve neden önemlidir?
DOM, tarayıcının yüklediği HTML belgesini programatik olarak gezip değiştirebileceğiniz bir API kümesidir. JavaScript ile DOM üzerinde işlem yaparak sayfa içeriğini, görünümlerini ve etkileşimlerini dinamik hale getirebilirsiniz. Daha fazla teknik arka plan için TechLead - DOM açıklaması kaynağına bakabilirsiniz.
Eleman seçme: querySelector ve querySelectorAll
DOM elemanlarını seçmek için en yaygın kullanılan yöntemler document.querySelector ve document.querySelectorAll metodlarıdır. Bu metotlar CSS seçicileri kullanır; tek bir eleman almak için querySelector, aynı seçiciyle eşleşen tüm elemanları almak için querySelectorAll kullanılır. W3Schools'ta bu metodların kullanımı örneklerle açıklanmıştır: W3Schools - querySelector().
Örnek: Basit eleman seçme
/* HTML örneği (gösterim için < ve > kaçış karakterleri kullanıldı) */
<div id="app">
<h1 id="title">Merhaba</h1>
</div>
/* JavaScript */
const title = document.querySelector('#title');
title.innerText = 'Yeni Başlık';
Not: querySelectorAll bir NodeList döner; modern tarayıcılarda NodeList üzerinde forEach çalışır, ihtiyaç halinde Array.from ile diziye çevrilebilir.
Sınıf ekleme ve yönetme: classList API
Elementlerin sınıflarını değiştirmek için element.classList API'si kullanılır. Sık kullanılan metodlar: add, remove, toggle, contains. Bu API DOM sınıflarıyla güvenli ve basit şekilde çalışmaya uygundur. Seçme ve değiştirme örnekleri için topluluk tartışmaları ve örnekler sayfada incelenebilir: Stack Overflow - Selecting and modifying DOM elements.
Örnek: Sınıf ekleme/çıkarma
const el = document.querySelector('.card');
el.classList.add('highlight');
el.classList.remove('hidden');
el.classList.toggle('active');
classList.toggle, ikinci bir boolean parametre alarak belirli bir değere göre açık/kapat işlemini kesinleştirebilir: el.classList.toggle('active', isActive).
İçerik güncelleme: innerText, innerHTML ve textContent
Metin ve HTML içeriğini güncellemek için yaygın olarak kullanılan özellikler innerText, innerHTML ve textContent'tir. innerText kullanıcının gördüğü metni yansıtır; innerHTML bir elementin HTML içeriğini okur/yazar; textContent ise elementin tüm metinsel içeriğini ham olarak alır/yazar.
innerHTML kullanırken dışarıdan gelen HTML içeriğini doğrudan eklemek XSS riski oluşturabileceği için dikkat gerektirir; eğer kullanıcı kaynaklı HTML eklenmesi gerekiyorsa, içerik uygun şekilde temizlenmelidir. innerText ve innerHTML arasındaki farkları ve ne zaman hangisini tercih edeceğinizi örneklerle inceleyebilirsiniz: Code Hints - DOM Manipulation.
Örnek: Metin güncelleme
const message = document.querySelector('#msg');
message.textContent = 'Form başarıyla gönderildi.';
Yeni eleman ekleme: createElement ve appendChild
Sayfaya yeni düğümler eklemek için document.createElement ile bir node oluşturup, hedef elemana appendChild ile ekleyebilirsiniz. Birden fazla düğümü tek seferde eklemek için DocumentFragment kullanmak performans açısından faydalıdır. Temel ekleme işlemleri ve prototipler için referans: TechLead - DOM manipulation örnekleri.
Örnek: Listeye yeni öğe eklemek
const li = document.createElement('li');
li.textContent = 'Yeni madde';
const list = document.querySelector('#todoList');
list.appendChild(li);
Pratik örnekler: adım adım senaryolar
Aşağıda sık karşılaşılan üç senaryo ve uygulanışı yer alıyor. Kodlar eğitim amaçlıdır; canlı projelerde kontrol ve doğrulama eklemeyi unutmayın.
1) Başlık metnini değiştirmek
/* HTML */
<h2 id="headline">Eski Başlık</h2>
/* JS */
const h = document.querySelector('#headline');
h.innerText = 'Güncellenmiş Başlık';
2) Butona tıklanıldığında sınıf toggle etmek
/* HTML */
<button id="btn">Göster/Gizle</button>
<div class="panel">İçerik</div>
/* JS */
const btn = document.querySelector('#btn');
const panel = document.querySelector('.panel');
btn.addEventListener('click', () => {
panel.classList.toggle('hidden');
});
3) Formdan gelen değeri listeye eklemek
/* HTML */
<input id="itemInput" type="text" />
<button id="add">Ekle</button>
<ul id="list"></ul>
/* JS */
const input = document.querySelector('#itemInput');
const addBtn = document.querySelector('#add');
const list = document.querySelector('#list');
addBtn.addEventListener('click', () => {
if (!input.value) return; // basit kontrol
const li = document.createElement('li');
li.textContent = input.value; // metin olarak ekle
list.appendChild(li);
input.value = '';
});
İyi uygulamalar ve performans ipuçları
- DOM erişimlerini gruplandırın: Tek tek güncellemeler yerine, mümkünse değişiklikleri bir araya toplayın.
- Büyük miktarda düğüm eklerken DocumentFragment kullanın; bu, yeniden akış sayısını azaltır.
- Layout/reflow maliyeti olan işlemlerden (ör. offsetWidth okumaları) kaçının veya bunları toplu yapın.
- Event delegation (olay temsilciliği) ile çok sayıda benzer eleman için tek bir dinleyici kullanmak performansı artırır.
- innerHTML ile dışarıdan gelen ham HTML eklenmesi gerekiyorsa içerikleri sanitize edin.
Hata ayıklama kontrol listesi
- Doğru seçici kullandığınızdan emin olun (id için '#', class için '.').
- Script'in DOM yüklendikten sonra çalıştığını doğrulayın (ör. defer veya DOMContentLoaded).
- console.log ile seçilen elemanın null olup olmadığını kontrol edin.
- Tarayıcı geliştirici araçları ile DOM ağaç yapısını inceleyin.
- innerText/innerHTML/textContent farklarına dikkat edin; amaçlarınıza uygun olanı kullanın.
Bu rehber temel ve pratik örnekler üzerinden DOM manipülasyonunu ele aldı. Daha derin örnekler ve tarayıcı uyumluluğu için referans kaynakları inceleyin:
Yorumlar