Ana Sayfa · Akademi · Robotik ve Kodlama · Web Temelleri · DOM ve Etkileşim

DOM ve Etkileşim

DOM'la element seçip metni/stili değiştirmeyi ve olaylarla etkileşim eklemeyi öğren.

DERS PUSULASI

Bu sayfayı ne için kullanacaksın?

Ana fikir

DOM, tarayıcının sayfanı bir ağaç gibi tuttuğu haritadır; JavaScript bu haritada bir elemanı seçip metnini, sınıfını, stilini değiştirebilir ve tıklama gibi olayları dinleyebilir.

Üretilecek kanıt

Küçük bir sayaç yapalım. Düğmeye her tıklandığında ekrandaki sayı bir artsın. Adımlar: Bir başlangıç HTML dosyası oluştur. Bir <button> ve sayıyı gösteren bir <span> ekle. JavaScript’te sayıyı tutmak için bir let değişkeni oluştur. Düğmeye bir click dinleyicisi ekle. Her tıklamada değişkeni artır ve <span> içine yaz. <p>Sayaç: <span id="sayi">0</span></p>…

Kontrol tuzağı

Elemanı koddan önce seçmek <script> etiketini <body> içeriğinden önce koyarsan, JavaScript henüz var olmayan bir elemanı seçmeye çalışır ve null döner. Çözüm: script’i </body> etiketinden hemen önce koy ya da kodu sayfa yüklendikten sonra çalıştır. id ve seçiciyi karıştırmak getElementById("baslik") içine # yazılmaz.…

Sonraki bağlantı

Formlar ve Veri Güvenliği: Kullanıcıdan bilgi alan formların nasıl çalıştığını ve kişisel veriyi korumanın neden önemli olduğunu öğreneceğiz.

Modül kaynakları: Python Tutorial · Arduino Learn

SeviyeBaşlangıç
Yaş10–16
Süre30–45 dk
Ön koşulJavaScript’e Giriş
İçerikStandart ders · 1.451 kelime
Son güncelleme

Bir cümlelik özet

DOM, tarayıcının sayfanı bir ağaç gibi tuttuğu haritadır; JavaScript bu haritada bir elemanı seçip metnini, sınıfını, stilini değiştirebilir ve tıklama gibi olayları dinleyebilir.

Neden önemli?

Şimdiye kadar yazdığın HTML sabit duruyordu. Sayfa açılıyor, yazılar görünüyor ve orada bekliyordu. Ama gerçek web siteleri seninle konuşur: bir düğmeye basarsın, menü açılır; bir kutuya yazarsın, sonuç değişir.

Bu canlılığın adı etkileşimtir. Etkileşimi mümkün kılan şey, JavaScript’in sayfaya dokunabilmesidir. JavaScript sayfaya doğrudan HTML olarak değil, DOM adı verilen bir yapı üzerinden dokunur.

DOM’u anlamak, “ekranda gördüğüm şeyi nasıl değiştiririm?” sorusunun cevabıdır. Buradan sonra yazacağın hemen her satır, bir elemanı bul, bir olayı dinle ve bir şeyi değiştir üçlüsüne dayanır.

DOM nedir?

DOM (Document Object Model, yani Belge Nesne Modeli), tarayıcının HTML sayfanı okuduktan sonra bellekte oluşturduğu ağaç biçimli bir modeldir. Her HTML etiketi bu ağaçta bir düğüm (node) olur.

Şu küçük sayfayı düşün:

<body>
  <h1>Merhaba</h1>
  <p>Bu bir paragraf.</p>
</body>

Tarayıcı bunu şöyle bir ağaç olarak tutar:

body
├── h1  →  "Merhaba"
└── p   →  "Bu bir paragraf."

JavaScript bu ağaçtaki bir düğümü bulup değiştirdiğinde, tarayıcı ekranı anında günceller. Yani DOM, kodun ile gözün gördüğü sayfa arasındaki köprüdür.

Neden HTML’i doğrudan değiştirmiyoruz?

HTML dosyası bir kez okunur ve ağaca dönüşür. Sayfa çalışırken artık dosyayı değil, bellekteki bu ağacı değiştiririz. Bu yüzden “metni değiştir” dediğimizde aslında “ağaçtaki düğümün içeriğini değiştir” demiş oluruz.

Eleman seçme

Bir şeyi değiştirmeden önce onu bulmamız gerekir. Tarayıcı bunun için hazır komutlar verir.

getElementById ile seçmek

Bir elemana HTML’de id verirsek, onu adıyla çağırabiliriz. id bir sayfada benzersiz olmalıdır.

<h1 id="baslik">Merhaba</h1>
const baslik = document.getElementById("baslik");
console.log(baslik.textContent); // "Merhaba"

document, tüm sayfayı temsil eden nesnedir. getElementById ise ona “şu id’ye sahip elemanı getir” der.

querySelector ile seçmek

querySelector, CSS seçicilerinin aynısını kullanır. Bu yüzden çok esnektir: #id, .sinif veya doğrudan etiket adı verebilirsin.

const baslik = document.querySelector("#baslik"); // id ile
const paragraf = document.querySelector("p");      // etiket ile
const kart = document.querySelector(".kart");      // sınıf ile

querySelector eşleşen ilk elemanı getirir. Aradığın eleman yoksa null döner; bu durumu unutmak sık karşılaşılan bir hatadır.

Elemanı değiştirmek

Elemanı bulduktan sonra onun içeriğini, sınıfını ve stilini değiştirebiliriz.

Metni değiştirmek

textContent özelliği bir elemanın içindeki yazıdır. Ona yeni bir değer atarsak yazı anında değişir.

const baslik = document.querySelector("#baslik");
baslik.textContent = "Merhaba, dünya!";

Sınıf eklemek veya kaldırmak

Görünümü CSS ile hazırlar, sonra JavaScript ile sadece sınıf ekleyip çıkarırız. Bu, stil ile davranışı ayrı tutan temiz bir yöntemdir.

.vurgulu {
  color: white;
  background-color: teal;
}
const kart = document.querySelector(".kart");
kart.classList.add("vurgulu");    // sınıf ekle
kart.classList.remove("vurgulu"); // sınıf kaldır
kart.classList.toggle("vurgulu"); // varsa kaldır, yoksa ekle

Stili doğrudan değiştirmek

Bazen tek bir özelliği hızlıca değiştirmek isteriz. style bunu sağlar. CSS’teki background-color, JavaScript’te backgroundColor olur.

const kutu = document.querySelector("#kutu");
kutu.style.backgroundColor = "orange";

Küçük değişiklikler için style pratiktir; ama çok sayıda özellik değişecekse sınıf kullanmak daha düzenlidir.

Olay dinlemek

Olay (event), sayfada olan bir şeydir: bir tıklama, bir tuşa basış, bir farenin üzerine gelmesi. JavaScript bu olayları dinleyebilir ve olay gerçekleştiğinde bir fonksiyon çalıştırabilir.

Bunun için addEventListener kullanırız. Ona iki şey veririz: hangi olayı dinleyeceğimizi ve ne yapacağımızı.

<button id="dugme">Bana tıkla</button>
<p id="mesaj">Henüz tıklamadın.</p>
const dugme = document.querySelector("#dugme");
const mesaj = document.querySelector("#mesaj");

dugme.addEventListener("click", function () {
  mesaj.textContent = "Teşekkürler, tıkladın!";
});

Burada "click" dinlenen olaydır. İkinci verdiğimiz fonksiyon ise olay olduğunda çalışır. Buna olay işleyici (event handler) denir.

Örnek 1: Tıklayınca metni değiştir

Yukarıdaki kod tam bir örnektir: düğmeye her basıldığında paragrafın yazısı değişir. Sayfayı yeniden yüklemeye gerek yoktur; değişiklik anında olur.

Örnek 2: Tıklayınca rengi değiştir

Aynı fikri renk için de kullanabiliriz. toggle sayesinde aynı düğme bir açıp bir kapatır.

<button id="renkDugme">Rengi değiştir</button>
<div id="kutu">Ben bir kutuyum.</div>
#kutu { padding: 20px; }
.koyu { background-color: navy; color: white; }
const renkDugme = document.querySelector("#renkDugme");
const kutu = document.querySelector("#kutu");

renkDugme.addEventListener("click", function () {
  kutu.classList.toggle("koyu");
});

İlk tıklamada kutu koyulaşır, ikinci tıklamada eski haline döner. Bu, gerçek sitelerdeki “karanlık mod” düğmesinin en basit hâlidir.

Mini uygulama

Küçük bir sayaç yapalım. Düğmeye her tıklandığında ekrandaki sayı bir artsın.

Adımlar:

  1. Bir başlangıç HTML dosyası oluştur.
  2. Bir <button> ve sayıyı gösteren bir <span> ekle.
  3. JavaScript’te sayıyı tutmak için bir let değişkeni oluştur.
  4. Düğmeye bir click dinleyicisi ekle.
  5. Her tıklamada değişkeni artır ve <span> içine yaz.
<p>Sayaç: <span id="sayi">0</span></p>
<button id="artir">Artır</button>
let sayac = 0;
const sayi = document.querySelector("#sayi");
const artir = document.querySelector("#artir");

artir.addEventListener("click", function () {
  sayac = sayac + 1;
  sayi.textContent = sayac;
});

Çalıştığında düğmeye her basışta sayının arttığını göreceksin. Denemeni istediğim değişiklikler:

Uygulama laboratuvarı: DOM ve Etkileşim

DOM ve Etkileşim konusunu kalıcı hâle getirmenin en iyi yolu, kavramı küçük ve ölçülebilir bir göreve dönüştürmektir. Bu çalışmada DOM nedir? ile Eleman seçme arasındaki ilişkiyi kullanarak anlamlı HTML, düzenli CSS, gerektiğinde küçük JavaScript ve erişilebilirlik kontrolü hazırlayacaksın. Amaç yalnız sonucun çalışması değil; hangi kararı neden verdiğini, neyi test ettiğini ve hangi durumda tasarımı değiştireceğini açıklayabilmektir.

Görev senaryosu

Şu senaryoyu ele al: kişisel öğrenme günlüğünü tanıtan tek sayfalık mini site. Dersin ana hedefi “DOM'la element seçip metni/stili değiştirmeyi ve olaylarla etkileşim eklemeyi öğren” olduğuna göre önce problemi tek cümleyle tanımla. Ardından sistemin alacağı girdiyi, uygulayacağı işlemi ve üreteceği çıktıyı ayrı ayrı yaz. Bilmediğin bir ayrıntı varsa onu varsayım olarak işaretle; varsayımı gerçek bilgi gibi kullanma.

  1. Planla: Başlangıç durumunu, beklenen sonucu ve kullanacağın kavramları yaz.
  2. En küçük sürümü kur: Yalnız temel davranışı çalıştır; süsleme ve ek özellikleri sonraya bırak.
  3. Üç test hazırla: Normal bir durum, sınırda bir durum ve hatalı ya da beklenmeyen bir durum seç.
  4. Sonucu kaydet: Beklenen ile gerçekleşeni yan yana yaz; fark varsa olası nedeni belirt.
  5. Tek değişiklik yap: Aynı anda birçok şeyi değiştirmek yerine bir kararı düzeltip testi yeniden çalıştır.

Başarı ölçütleri

“DOM ve Etkileşim” çalışmasını bitirdiğinde ürünü bir arkadaşına yalnız bölüm başlıklarıyla anlat. Arkadaşın kişisel öğrenme günlüğünü tanıtan tek sayfalık mini site senaryosundaki adımları ve karar nedenlerini takip edebiliyorsa anlatım yeterince açıktır. Anlaşılmayan noktayı daha fazla terim ekleyerek değil, DOM nedir? ve Eleman seçme ilişkisini daha küçük adımlara bölerek düzelt.

Sık yapılan hatalar

Elemanı koddan önce seçmek

<script> etiketini <body> içeriğinden önce koyarsan, JavaScript henüz var olmayan bir elemanı seçmeye çalışır ve null döner. Çözüm: script’i </body> etiketinden hemen önce koy ya da kodu sayfa yüklendikten sonra çalıştır.

id ve seçiciyi karıştırmak

getElementById("baslik") içine # yazılmaz. Ama querySelector("#baslik") içine # yazılır. İkisi farklı kurallarla çalışır.

Metni değiştireyim derken innerHTML kullanmak

Sadece yazı değiştirecekken innerHTML yerine textContent kullan. innerHTML, dışarıdan gelen metni HTML gibi çalıştırabildiği için güvenlik açığına yol açabilir.

toggle yerine iki kez add yazmak

Bir düğmeyi hem açıp hem kapatmak istiyorsan add ve remove arasında sen karar vermek zorunda kalırsın; classList.toggle bu işi tek satırda yapar.

Güvenlik notu

Ders özeti

Kontrol soruları

  1. DOM’un açılımı nedir ve tarayıcı onu neden oluşturur?
  2. getElementById("kutu") ile querySelector("#kutu") arasındaki yazım farkı nedir?
  3. Bir elemanın içindeki yazıyı değiştirmek için hangi özelliği kullanırız?
  4. classList.toggle("aktif") bir elemanda ne yapar?
  5. addEventListener("click", ...) çağrısına verdiğimiz iki bilgi nedir?

Cevaplar

  1. DOM, Document Object Model (Belge Nesne Modeli) demektir. Tarayıcı HTML’i okuduktan sonra onu bellekte ağaç biçiminde tutar; böylece JavaScript sayfayı bulup değiştirebilir.
  2. getElementById içine sadece id adı ("kutu") yazılır. querySelector CSS seçicisi bekler, bu yüzden id’nin başına # konur ("#kutu").
  3. textContent özelliğini kullanırız; ona yeni değer atadığımızda ekrandaki yazı anında değişir.
  4. Sınıf elemanda yoksa ekler, varsa kaldırır. Böylece tek çağrıyla aç/kapat davranışı elde edilir.
  5. Birincisi dinlenecek olayın adı (örneğin "click"), ikincisi olay gerçekleştiğinde çalışacak fonksiyondur.

Kaynak ve doğrulama notu

“DOM ve Etkileşim” dersi için doğrulama odağı DOM nedir? ile Eleman seçme arasındaki ilişkinin örnekler üzerinde tutarlı çalışmasıdır. Örnekler standart HTML, CSS ve tarayıcı JavaScript’i yaklaşımıyla hazırlanmıştır. Sayfa yalnız görsel olarak değil; klavye kullanımı, odak sırası, mobil görünüm ve anlamlı başlık yapısı açısından da kontrol edilmelidir.

Sonraki ders

Formlar ve Veri Güvenliği: Kullanıcıdan bilgi alan formların nasıl çalıştığını ve kişisel veriyi korumanın neden önemli olduğunu öğreneceğiz.

Quiz’i BaşlatWeb Temelleri bölümüne dön
SORU HAVUZU

Bu dersi 10 soruyla pekiştir

Bu ders için 20 soruluk bir havuz hazırlandı. Her başlangıçta 10 soru ve seçenekler yeniden karıştırılır.