DOM ve olaylar — JavaScript

Bu derste öğreneceklerin

DOM'un ne olduğunu açıklamak
querySelector ile elemanları bulup metnini, stilini ve sınıflarını değiştirmek
Yeni elemanlar oluşturup sayfaya eklemek
addEventListener ile tıklamalara, yazmaya ve form gönderimine tepki vermek

Bir çevrim içi mağazada “Sepete ekle” düğmesine basıyorsun ve yukarıdaki sepet simgesindeki sayı hemen artıyor. Sayfa yeniden yüklenmiyor; JavaScript sayfanın yalnızca bir parçasını değiştiriyor. Bunu DOM sayesinde yapar. Bu dersteki tüm örnekler canlıdır: çalıştır, düğmelere tıkla, kodu değiştir.

DOM nedir?

Tanım

DOM (Document Object Model)

Tarayıcının bir HTML sayfasından oluşturduğu nesne ağacı. Her etiket ağacın bir düğümü olur; JavaScript bu düğümleri okuyabilir, değiştirebilir, silebilir ve yenilerini ekleyebilir.

Text

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── ul
            ├── li
            └── li

Bir başlığı ve iki maddelik listesi olan sayfanın DOM ağacı. Ağacın kökü document nesnesidir.

Elemanları bulmak ve değiştirmek

document.querySelector() bir CSS seçicisi alır ve eşleşen ilk elemanı döndürür: '#greeting' id'ye, '.note' sınıfa, 'h2' etikete göre arar. Eşleşen tüm elemanlar gerekiyorsa querySelectorAll() kullanılır. Bulunan elemanda textContent metni, style stilleri, classList ise CSS sınıflarını yönetir.

HTML· Kodu değiştir ve yeniden çalıştır

<style>
  .highlight { background: #ffe58a; }
</style>

<h2 id="greeting">Hello!</h2>
<p class="note">First note</p>
<p class="note">Second note</p>

<script>
  const greeting = document.querySelector('#greeting');
  greeting.textContent = 'Hello, Baku!';
  greeting.style.color = 'teal';

  const notes = document.querySelectorAll('.note');
  notes.forEach((note, i) => {
    note.textContent = `Note number ${i + 1}`;
    note.classList.add('highlight');
  });
</script>

Önizleme

Rengi değiştir, add yerine toggle yaz ve sonucu karşılaştır.

Yeni elemanlar oluşturmak

document.createElement('li') yeni bir eleman oluşturur ama bu eleman henüz sayfada değildir. Onu var olan bir elemanın içine append() ile ekleyince görünür. Bir elemanı silmek için element.remove() çağrılır. Böylece bir dizideki verilerden koca bir liste kurabilirsin:

HTML· Kodu değiştir ve yeniden çalıştır

<h3>Cities to visit</h3>
<ul id="cities"></ul>

<script>
  const cities = ['Baku', 'Ganja', 'Shaki', 'Lankaran'];
  const list = document.querySelector('#cities');

  for (const city of cities) {
    const item = document.createElement('li');
    item.textContent = city;
    list.append(item);
  }
</script>

Önizleme

Olaylar

Olay (event), sayfada olan bir şeydir: tıklama, bir tuşa basma, bir alana yazı yazma, form gönderme. element.addEventListener('click', fonksiyon) tarayıcıya şunu söyler: “Bu elemana tıklanınca şu fonksiyonu çağır.” Bu fonksiyona olay işleyicisi (event handler) denir.

HTML· Kodu değiştir ve yeniden çalıştır

<button id="like">Like</button>
<span id="count">0</span> likes

<script>
  let likes = 0;
  const button = document.querySelector('#like');
  const count = document.querySelector('#count');

  button.addEventListener('click', () => {
    likes++;
    count.textContent = likes;
  });
</script>

Önizleme

Düğmeye birkaç kez tıkla; sayaç her tıklamada artar.

Olay	Ne zaman olur
`click`	elemana tıklandığında
`input`	alandaki metin değiştiğinde, her karakterde
`submit`	form gönderildiğinde
`keydown`	bir tuşa basıldığında
`mouseover`	fare elemanın üzerine geldiğinde

İşleyici fonksiyon argüman olarak bir olay nesnesi alır. Bu nesnenin preventDefault() metodu tarayıcının varsayılan davranışını durdurur; örneğin form gönderilince sayfanın yeniden yüklenmesini. Aşağıdaki örnekte input olayı yazdığını anında gösterir, submit ise bir selamlama mesajı çıkarır.

HTML· Kodu değiştir ve yeniden çalıştır

<form id="form">
  <input id="name" placeholder="Your name">
  <button>Say hi</button>
</form>
<p id="preview">Start typing...</p>
<p id="result"></p>

<script>
  const input = document.querySelector('#name');
  const preview = document.querySelector('#preview');
  const result = document.querySelector('#result');

  input.addEventListener('input', () => {
    preview.textContent = `Typing: ${input.value}`;
  });

  document.querySelector('#form').addEventListener('submit', (event) => {
    event.preventDefault();
    result.textContent = `Hello, ${input.value || 'stranger'}!`;
  });
</script>

Önizleme

Mini proje: yapılacaklar listesi

Şimdi hepsini birleştirelim: bir görev yaz, “Add” düğmesine bas; listeye yeni bir madde eklenir. Bir maddeye tıklarsan classList.toggle onu tamamlandı olarak işaretler, tekrar tıklamak işareti kaldırır.

HTML· Kodu değiştir ve yeniden çalıştır

<style>
  li { cursor: pointer; }
  .done { text-decoration: line-through; color: gray; }
</style>

<input id="task" placeholder="New task">
<button id="add">Add</button>
<ul id="list"></ul>

<script>
  const input = document.querySelector('#task');
  const list = document.querySelector('#list');

  document.querySelector('#add').addEventListener('click', () => {
    const text = input.value.trim();
    if (!text) return;
    const item = document.createElement('li');
    item.textContent = text;
    item.addEventListener('click', () => item.classList.toggle('done'));
    list.append(item);
    input.value = '';
  });
</script>

Önizleme

Kendin geliştir: her maddeye bir silme düğmesi ekle (item.remove()).

Alıştırma

Gerçek projelerde DOM yalnızca verileri gösterir, mantık ise sıradan fonksiyonlarda yaşar. Yapılacaklar listesinin mantığını DOM olmadan yaz: toggle(index) görevin done değerini tersine çevirsin, render() ise her görevi [x] metin ya da [ ] metin biçiminde, en sonda da Done: 1 of 3 gibi bir özet yazdırsın.

Alıştırma · JavaScript· Kodu değiştir ve yeniden çalıştır

const todos = [
  { text: 'Buy bread', done: false },
  { text: 'Learn the DOM', done: false },
  { text: 'Walk the dog', done: false },
];

function toggle(index) {
  // flip todos[index].done
}

function render() {
  // print [x] text or [ ] text for every task, then Done: N of M
}

toggle(0);
toggle(2);
toggle(2);
render();

▸ Beklenen çıktı

[x] Buy bread
[ ] Learn the DOM
[ ] Walk the dog
Done: 1 of 3

Önemli noktalar

DOM, tarayıcının HTML'den kurduğu nesne ağacıdır; kökü document'tir.
querySelector eşleşen ilk elemanı, querySelectorAll ise hepsini döndürür.
textContent, style ve classList bir elemanın metnini, stilini ve sınıflarını değiştirir.
createElement eleman oluşturur, append sayfaya ekler, remove siler.
addEventListener bir olaya işleyici bağlar; preventDefault() tarayıcının varsayılan davranışını durdurur.

Kendini test et

10 soru. Her doğru cevap XP kazandırır.

1 / 10

DOM nedir?