Ana içeriğe geç
Software Dictionary
Kitap 02 · Web GeliştirmeSayfa 14 / 61

DOM

Belge Nesne Modeli

Okunuşu
dom
Güncellendi 2 dk okuma

Bu sayfayı paylaşın

Bağlantıyı gönderin, tanımı bağlantısıyla birlikte alıntılayın ya da kendi sitenizde bir kart olarak gösterin.

https://softwaredictionary.org/tr/terimler/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.

Bir bakışta

Tarayıcı HTML'i bir düğüm ağacına, yani DOM'a dönüştürür: html body'yi, body bir h1 ve bir p'yi içerir; metinleri de metin düğümü olur. JavaScript bir düğümü değiştirebilir ve ekrandaki sayfa da onunla değişir.<html><body><h1>Hello</h1><p>Hi <a>link</a></p></body></html>ayrıştırhtmlbodyh1p"Hello""Hi "a"link"h1.textContent = "Hi!"düğümü değiştir, ekran güncellenir
DOM, HTML dosyası değil canlı sayfadır: bir düğümü değiştirin, ekran da değişir; özgün HTML ise olduğu gibi kalı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 eklemekjavascript
// 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.

Sık karşılaştırılanlar

İlgili sayfalar

Kaynaklar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin

Daha fazla

Ayarlar

EnglishTürkçe