DOM: JavaScript Programlamada Belge Nesne Modeli

JavaScript, web sayfalarını dinamik ve etkileşimli hale getirmek için kullanılan güçlü bir programlama dilidir. Bu etkileşimi sağlamak için JavaScript, Belge Nesne Modeli (Document Object Model, DOM) adı verilen bir yapıyı kullanır. DOM, bir web sayfasının yapısını ve içeriğini temsil eden nesne tabanlı bir modeldir. Bu makalede, DOM'un ne olduğunu, nasıl çalıştığını ve JavaScript ile nasıl kullanılacağını inceleyeceğiz.

DOM Nedir?

DOM, bir HTML veya XML belgesinin yapısını programatik olarak temsil eden bir modeldir. Belgeyi, ağaç yapısında bir dizi düğüm (node) ve nesne olarak modelleyerek, JavaScript gibi programlama dillerinin belge içeriğine erişmesine ve bu içeriği değiştirmesine olanak tanır. DOM, web sayfasının statik HTML yapısını dinamik hale getirir.

DOM Ağaç Yapısı

DOM, belgeyi hiyerarşik bir ağaç yapısı olarak temsil eder. Bu yapı, kök düğümden (document) başlayarak, elementler, metin düğümleri ve diğer düğümler arasında bağlantılar içerir.

Örnek bir HTML belgesi ve buna karşılık gelen DOM ağacı:

<!DOCTYPE html>
<html>
<head>
    <title>Başlık</title>
</head>
<body>
    <h1>Merhaba, Dünya!</h1>
    <p>Bu bir paragraftır.</p>
</body>
</html>

DOM Ağacı:

document
 └── html
     ├── head
     │   └── title
     │       └── "Başlık"
     └── body
         ├── h1
         │   └── "Merhaba, Dünya!"
         └── p
             └── "Bu bir paragraftır."

DOM ile Çalışma

JavaScript kullanarak DOM ile çalışabilir, belge içeriğini dinamik olarak değiştirebilir, yeni öğeler ekleyebilir ve mevcut öğeleri silebilirsiniz. DOM ile çalışmak için JavaScript'te çeşitli yöntemler ve özellikler bulunur.

DOM Seçicileri

DOM öğelerini seçmek için JavaScript'te çeşitli yöntemler kullanılır:

getElementById: Belirli bir id'ye sahip öğeyi seçer.
```
let baslik = document.getElementById("baslik");
```
getElementsByClassName: Belirli bir sınıf adını taşıyan tüm öğeleri seçer.
```
let paragraflar = document.getElementsByClassName("paragraf");
```
getElementsByTagName: Belirli bir etiket adını taşıyan tüm öğeleri seçer.
```
let listeElemanlari = document.getElementsByTagName("li");
```
querySelector: Belirli bir CSS seçicisine uyan ilk öğeyi seçer.
```
let ilkParagraf = document.querySelector("p");
```
querySelectorAll: Belirli bir CSS seçicisine uyan tüm öğeleri seçer.
```
let tumParagraflar = document.querySelectorAll("p");
```

DOM Manipülasyonu

DOM'u manipüle etmek, yani belge içeriğini dinamik olarak değiştirmek için çeşitli yöntemler kullanılır:

İçerik Değiştirme: Bir öğenin içeriğini değiştirmek için innerHTML veya textContent özellikleri kullanılır.
```
let baslik = document.getElementById("baslik");
baslik.innerHTML = "Yeni Başlık";
```

Öğe Ekleme: Yeni bir öğe oluşturmak ve belgeye eklemek için createElement ve appendChild yöntemleri kullanılır.

let yeniParagraf = document.createElement("p");
yeniParagraf.textContent = "Bu yeni bir paragraf.";
document.body.appendChild(yeniParagraf);

Öğe Silme: Bir öğeyi belgeden silmek için removeChild yöntemi kullanılır.

let silinecekParagraf = document.getElementById("silinecek");
document.body.removeChild(silinecekParagraf);

Özellik Değiştirme: Bir öğenin özelliklerini değiştirmek için setAttribute ve getAttribute yöntemleri kullanılır.
```
let link = document.querySelector("a");
link.setAttribute("href", "<https://www.example.com>");
```

DOM Olayları

DOM olayları, kullanıcı etkileşimlerine yanıt vermek için kullanılır. Olaylar, tıklama, fare hareketi, klavye girişi gibi çeşitli etkileşimler olabilir.

Örnek bir tıklama olayı dinleyicisi:

let buton = document.querySelector("button");
buton.addEventListener("click", function() {
    alert("Butona tıklandı!");
});

Sonuç

DOM, JavaScript'in web sayfalarını dinamik ve etkileşimli hale getirmek için kullandığı temel yapıdır. DOM ile çalışarak, web sayfası içeriğini ve yapısını programatik olarak değiştirebilir, kullanıcı etkileşimlerine yanıt verebilir ve zengin kullanıcı deneyimleri oluşturabilirsiniz. Bu makalede öğrendiklerinizi kullanarak, kendi JavaScript projelerinizde DOM ile etkili bir şekilde çalışabilirsiniz. İyi kodlamalar!