📜 JavaScript 📊 Başlangıç ⏱ 30 dk 📋 1 Kod Örneği

DOM Manipülasyonu

Element seçme, içerik değiştirme, stil ekleme ve element oluşturma.

DOM (Document Object Model), HTML belgesinin JavaScript tarafından okunabilen ve değiştirilebilen ağaç yapısıdır. Her HTML elementi bir DOM düğümüdür.

getElementById mi, querySelector mu?

getElementById sadece ID ile çalışır ve en hızlısıdır. querySelector herhangi bir CSS seçiciyle çalışır. querySelectorAll birden fazla elementi NodeList olarak döndürür.

innerHTML ile textContent Farkı

innerHTML HTML etiketlerini yorumlar, XSS açığı oluşturabilir. textContent düz metin ekler, HTML etiketlerini metin olarak gösterir — kullanıcı verisini göstermek için güvenlidir.

Element Oluşturma

document.createElement() ile yeni element oluşturulur, appendChild() veya prepend() ile DOM'a eklenir. remove() ile silinir.

HTML DOM Tam Rehber

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<style>
  body { font-family: sans-serif; padding: 20px; }
  .vurgu { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  .liste-item { padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; margin: 6px 0; cursor: pointer; }
  .liste-item:hover { background: #f0f9ff; }
  .silindi { text-decoration: line-through; opacity: 0.4; }
  button { padding: 8px 16px; background: #6366f1; color: white; border: none; border-radius: 8px; cursor: pointer; margin: 4px; }
  input { padding: 8px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; }
</style>
</head>
<body>

<h2 id="baslik">DOM Manipülasyonu</h2>
<p id="aciklama">Elementleri JavaScript ile değiştirin.</p>

<div>
  <input id="gorev-input" type="text" placeholder="Yeni görev...">
  <button onclick="gorevEkle()">+ Ekle</button>
  <button onclick="hepsiniSil()">Temizle</button>
</div>

<div id="liste"></div>
<div id="sayac" style="margin-top:12px;color:#64748b;font-size:14px"></div>

<script>
// ── Element Seçme ──
const baslik    = document.getElementById('baslik');
const liste     = document.querySelector('#liste');
const tumButonlar = document.querySelectorAll('button');

// ── İçerik Değiştirme ──
baslik.textContent = 'Görev Listesi';         // düz metin
baslik.innerHTML   = 'Görev <small>Listesi</small>'; // HTML

// ── Stil Değiştirme ──
baslik.style.color    = '#6366f1';
baslik.style.fontSize = '24px';

// ── Class Yönetimi ──
baslik.classList.add('vurgu');
baslik.classList.remove('vurgu');
baslik.classList.toggle('vurgu');
baslik.classList.contains('vurgu'); // true/false

// ── Özellik Yönetimi ──
const input = document.getElementById('gorev-input');
input.setAttribute('maxlength', '50');
input.getAttribute('type');      // "text"
input.removeAttribute('disabled');

// ── Element Oluşturma ──
let gorevler = [];

function gorevEkle() {
  const deger = input.value.trim();
  if (!deger) return;

  const gorev = {
    id:   Date.now(),
    metin: deger,
    tamamlandi: false
  };
  gorevler.push(gorev);
  input.value = '';
  listeYenile();
}

function gorevSil(id) {
  gorevler = gorevler.filter(g => g.id !== id);
  listeYenile();
}

function gorevTamamla(id) {
  const gorev = gorevler.find(g => g.id === id);
  if (gorev) gorev.tamamlandi = !gorev.tamamlandi;
  listeYenile();
}

function hepsiniSil() {
  gorevler = [];
  listeYenile();
}

function listeYenile() {
  liste.innerHTML = '';

  gorevler.forEach(gorev => {
    const div = document.createElement('div');
    div.className = 'liste-item' + (gorev.tamamlandi ? ' silindi' : '');

    div.innerHTML = `
      <span onclick="gorevTamamla(${gorev.id})" style="flex:1">
        ${gorev.tamamlandi ? '✓' : '○'} ${gorev.metin}
      </span>
      <button onclick="gorevSil(${gorev.id})"
              style="background:#ef4444;padding:4px 10px;font-size:12px">Sil</button>
    `;
    div.style.display = 'flex';
    div.style.alignItems = 'center';
    div.style.gap = '8px';

    liste.appendChild(div);
  });

  const tamamlanan = gorevler.filter(g => g.tamamlandi).length;
  document.getElementById('sayac').textContent =
    `${gorevler.length} görev, ${tamamlanan} tamamlandı`;
}

// Enter tuşu
input.addEventListener('keydown', e => {
  if (e.key === 'Enter') gorevEkle();
});

listeYenile();
</script>
</body>
</html>

CANLI ÖNİZLEME