# DOM (Belge Nesne Modeli)

Adres: https://softwaredictionary.org/tr/terimler/dom
Kategori: Web Geliştirme
Son güncelleme: 2026-09-29
Okunuşu: dom

Kısaca: DOM, tarayıcının bir web sayfasını temsil eden ve JavaScript'in okuyup değiştirerek kullanıcının gördüğünü güncelleyebildiği bellek içi nesne ağacıdır.

## DOM nedir?

Bir tarayıcı HTML belgesini yüklediğinde, metni Belge Nesne Modeli (Document Object Model) adı verilen bir nesne ağacına ayrıştırır. Her öğe, nitelik ve metin parçası bu ağaçta bir düğüm (node) olur; ebeveyn, çocuk ve kardeş ilişkileri de HTML'deki iç içe geçmeyi yansıtır.

DOM bir veri yapısı olduğu kadar bir API'dir de. JavaScript, düğümleri bulmak için `document.querySelector()` gibi metotları; metinlerini ya da niteliklerini değiştirmek, öğe eklemek veya kaldırmak ve tıklama ile tuş basma gibi olayları (event) dinlemek için de ilgili API'leri kullanabilir. DOM değiştiğinde tarayıcı ekranı buna göre günceller.

Yardımcı bir benzetme soy ağacıdır: `<html>` öğesi atadır, `<head>` ve `<body>` onun çocuklarıdır, iç içe geçen her öğe de bir torundur. Tek bir düğümü düzenlemek, bütün ağacı yeniden çizmeden tek bir dalı güncellemek gibidir.

DOM, HTML kaynak kodunuzla aynı şey değildir. Kaynak, sunucunun gönderdiği özgün metindir; DOM ise betikler çalıştıktan sonra sayfanın canlı ve güncel durumudur. Tarayıcı geliştirici araçlarının, kaynağı görüntüle'nin (View Source) göstermediği öğeleri gösterebilmesinin nedeni budur. React gibi framework'ler ise gerçek DOM'da gereken en küçük değişiklik kümesini bulmak için bellekteki bir kopya olan sanal DOM'u (virtual DOM) kullanır.

## Önemli noktalar

- DOM, bir sayfayı düğümlerden oluşan bir ağaç olarak temsil eder.
- JavaScript sayfayı okumak ve değiştirmek için DOM API'lerini kullanır.
- DOM'daki değişiklikler ekrana yansır.
- DOM, özgün HTML metni değil, sayfanın canlı durumudur.
- Sanal DOM bir framework tekniğidir, tarayıcının parçası değildir.

## Örnek: DOM metotlarıyla listeye öğe eklemek

```javascript
// Find the existing <ul id="todo"> element
const list = document.querySelector("#todo");

// Create a new <li> node and set its text
const item = document.createElement("li");
item.textContent = "Buy milk";

// Insert it into the tree; the page updates immediately
list.append(item);
```

## Sık sorulan sorular

**DOM, JavaScript'in bir parçası mıdır?**

Hayır. DOM, tarayıcıların uyguladığı bir web standardıdır; JavaScript ise ona erişmek için en sık kullanılan dildir. Örneğin Node.js gibi tarayıcı dışı ortamlarda, bir kütüphane sağlamadıkça DOM yoktur.

**Sanal DOM (virtual DOM) nedir?**

Sanal DOM, bazı arayüz framework'lerinin bellekte tuttuğu, sayfa yapısının hafif bir kopyasıdır. Framework eski ve yeni sürümleri karşılaştırır, ardından gerçek DOM'a yalnızca gerekli değişiklikleri uygular.

**DOM ile HTML arasındaki fark nedir?**

HTML, sunucunun gönderdiği metin biçimindeki işaretlemedir; DOM ise tarayıcının ondan oluşturduğu nesne ağacıdır. Betikler sayfa yüklendikten sonra DOM'u değiştirebileceği için ikisi birbirinden farklı olabilir.

## Kaynaklar

- [DOM Living Standard](https://dom.spec.whatwg.org/)

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt