DOM nedir?

Tarayıcının HTML'i nasıl bir ağaca çevirdiğini ve document nesnesini öğrenirsin.

DOM nedir?

Tarayıcı bir HTML sayfasını yüklediğinde, her etiketi bir nesneye çevirir ve bu nesneleri ağaç yapısında düzenler. Bu yapıya DOM (Document Object Model) denir.

DOM sayesinde JavaScript, sayfadaki öğeleri okuyup değiştirebilir. Ağacın kökünde document nesnesi vardır; tüm öğelere buradan ulaşırız.

Her etiket bir düğüm (node) olur; örneğin <p> bir öğe düğümü, etiketin metni bir metin düğümüdür.

document nesnesi

document nesnesi DOM'a giriş noktasıdır. Sayfanın tamamını temsil eder ve bazı yararlı özellikleri vardır.

document.title sayfanın başlığını (<title> etiketinin içeriğini) verir. document.body ise <body> etiketini döndürür.

Bunlara erişmek için bir fonksiyon çağırmaya gerek yoktur; doğrudan document.title biçiminde yazman yeter.

Uygulama Başlığı ve URL'i yazdır

Sayfanın başlığını ve URL'sini ayrı ayrı console.log ile yazdır. document.title ve document.URL özelliklerini kullan.

Örnek çözümü göster

document.title ve document.URL özelliklerini ayrı satırlarda console.log ile yaz.
Örnek çözüm:
console.log(document.title);
console.log(document.URL);

Kendini test et

DOM neyi temsil eder?
- HTML sayfasının tarayıcıdaki nesne modeli
- Sunucuya gönderilen bir HTTP isteği
- CSS seçicilerini içeren bir dosya
- JavaScript'in resmi bir kütüphanesi
Cevabı göster

HTML sayfasının tarayıcıdaki nesne modeli — Doğru! DOM, HTML'in tarayıcıda nesne ağacı olarak temsil edilmesidir.

Sayfa başlığını yazdır

// Sayfa başlığını konsola yazdır
console.log(document.____);

Cevabı göster

// Sayfa başlığını konsola yazdır
console.log(document.title);

DOM terimlerini eşleştir

document

Tüm sayfanın kök nesnesi
element

HTML etiketini temsil eden düğüm
node

Ağaçtaki herhangi bir birim
attribute

Etiketin özniteliği (ör. class)

Sıradaki ders: getElementById

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler