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)