JavaScript DOM Nedir ve Neden Önemlidir?

Şimdiye kadar JavaScript'i tek başına öğrendik - değişkenler, fonksiyonlar, array'ler, object'ler... Ama hep konsolda çalıştık. Peki JavaScript ile gerçek bir web sayfasını nasıl kontrol edebiliriz?

İşte DOM (Document Object Model) tam da bu! DOM, JavaScript ile HTML ve CSS arasındaki köprüdür. Bu sayede:

• Sayfadaki içerikleri değiştirebilirsiniz
• Stilleri dinamik olarak uygulayabilirsiniz
• Kullanıcı tıklamalarına tepki verebilirsiniz
• Yeni elementler ekleyip silebilirsiniz

DOM Nedir?

DOM (Document Object Model), tarayıcının HTML sayfasını JavaScript nesnelerine dönüştürdüğü bir modeldir.

Basit Tanım

HTML Dosyası  →  Tarayıcı  →  JavaScript Nesneleri (DOM)
                    ↓
              Görsel Sayfa

Tarayıcı bir HTML dosyasını yüklediğinde:

1. HTML kodunu okur
2. Her HTML elementi için bir JavaScript nesnesi oluşturur
3. Bu nesneleri birbirine bağlı bir ağaç yapısı şeklinde düzenler
4. Bu yapıya DOM denir

DOM Ağaç Yapısı

Şu basit HTML'i düşünelim:

<!DOCTYPE html>
<html>
<head>
    <title>Merhaba</title>
</head>
<body>
    <h1>Başlık</h1>
    <p>Paragraf metni</p>
    <ul>
        <li>Madde 1</li>
        <li>Madde 2</li>
    </ul>
</body>
</html>

Tarayıcı bunu şöyle bir ağaç yapısına dönüştürür:

                    document
                       │
                      html
                    /      \
                head        body
                  │        /  |  \
               title     h1   p   ul
                  │       │   │   / \
             "Merhaba" "Başlık" "Paragraf" li  li
                                          │    │
                                     "Madde 1" "Madde 2"

Aile İlişkileri

DOM'da elementler arasında aile ilişkisi vardır:

document Nesnesi

DOM'un en tepesinde document nesnesi bulunur. Bu nesne:

• Tüm sayfanın "giriş kapısı"dır
• Sayfadaki tüm elementlere buradan ulaşılır
• Tarayıcı tarafından otomatik oluşturulur

Konsolda document

Tarayıcı konsolunu açıp document yazın:

document
// Tüm HTML sayfasını gösterir

Daha detaylı görmek için:

console.dir(document);
// document nesnesinin tüm özelliklerini gösterir

document'in Bazı Özellikleri

// Sayfa başlığı
console.log(document.title);  // "Merhaba"

// Sayfa URL'i
console.log(document.URL);    // "https://..."

// Body elementi
console.log(document.body);   // <body>...</body>

// Head elementi
console.log(document.head);   // <head>...</head>

// Sayfadaki tüm linkler
console.log(document.links);  // HTMLCollection [...]

// Sayfadaki tüm resimler
console.log(document.images); // HTMLCollection [...]

// Sayfadaki tüm formlar
console.log(document.forms);  // HTMLCollection [...]

DOM ile Neler Yapılabilir?

1. İçerik Değiştirme

// Başlığın metnini değiştir
document.querySelector("h1").innerText = "Yeni Başlık!";

2. Stil Değiştirme

// Arka plan rengini değiştir
document.body.style.backgroundColor = "lightblue";

3. Element Ekleme

// Yeni bir paragraf oluştur ve ekle
const yeniParagraf = document.createElement("p");
yeniParagraf.innerText = "Bu yeni eklendi!";
document.body.appendChild(yeniParagraf);

4. Element Silme

// Bir elementi sil
const silinecek = document.querySelector(".silinecek");
silinecek.remove();

5. Olaylara Tepki Verme

// Butona tıklanınca bir şey yap
const buton = document.querySelector("button");
buton.addEventListener("click", function() {
    alert("Butona tıklandı!");
});

Gerçek Dünya Örnekleri

Örnek 1: Dropdown Menü

Bir web sitesindeki açılır menü düşünün:

1. Kullanıcı "Menü" butonuna tıklar
2. JavaScript bu tıklamayı algılar
3. Gizli olan menü listesini görünür yapar
4. Tekrar tıklayınca gizler

// Pseudo kod
buton.addEventListener("click", function() {
    menu.classList.toggle("gorunur");
});

Örnek 2: Form Doğrulama

Bir kayıt formu düşünün:

1. Kullanıcı email girer
2. JavaScript email formatını kontrol eder
3. Hatalıysa kırmızı uyarı gösterir
4. Doğruysa yeşil onay gösterir

Örnek 3: Canlı Arama

Bir arama kutusu düşünün:

1. Kullanıcı her harf yazdığında
2. JavaScript yazdığını algılar
3. Sonuçları anında filtreler ve gösterir

DOM'un Önemi

JavaScript Öncesi (Statik)

HTML + CSS = Sabit Sayfa

Kullanıcı sadece izleyebilir
Etkileşim yok

JavaScript + DOM (Dinamik)

HTML + CSS + JavaScript = İnteraktif Uygulama

Kullanıcı etkileşebilir
Sayfa tepki verir
Canlı güncelleme

Tarayıcı Geliştirici Araçları

DOM ile çalışırken Developer Tools (F12) çok önemlidir:

Elements Sekmesi

• Sayfadaki tüm HTML elementlerini gösterir
• Elementlerin stillerini inceler
• Canlı değişiklik yapabilirsiniz

Console Sekmesi

• JavaScript kodlarını test eder
• document nesnesini inceleyebilirsiniz
• Hataları görürsünüz

Pratik: Konsolu Açın

1. Herhangi bir web sayfasında F12'ye basın
2. Console sekmesine gidin
3. Şunları deneyin:

// Sayfa başlığını değiştir
document.title = "Merhaba Dünya!";

// Body rengini değiştir
document.body.style.backgroundColor = "yellow";

// Tüm resimleri gizle
document.querySelectorAll("img").forEach(img => img.style.display = "none");

// Tüm linklerin rengini değiştir
document.querySelectorAll("a").forEach(a => a.style.color = "red");

DOM Manipülasyonu Adımları

Genel olarak DOM ile çalışırken şu adımları izleriz:

1. SEÇ      →  Hangi elementi değiştireceğiz?
2. DEĞİŞTİR →  Ne yapacağız? (içerik, stil, class, vs.)
3. TEKRARLA →  Gerekirse başka elementler için tekrarla

Seçme Yöntemleri (Önümüzdeki Konular)

Değiştirme Yöntemleri (Önümüzdeki Konular)

Özet

Sırada Ne Var?

DOM'un ne olduğunu ve nasıl çalıştığını öğrendik. Artık pratik kısma geçebiliriz!

Bir sonraki makalede getElementById metodunu öğreneceğiz - sayfadaki elementleri ID ile seçmenin en basit yolu.