HTML DOM'si nedir?
HTML DOM , HTML için bir Nesne Modelidir . Tanımlar:
- Nesne olarak HTML öğeleri
- Tüm HTML öğeleri için özellikler
- Tüm HTML öğeleri için yöntemler
- Tüm HTML öğeleri için etkinlikler
HTML DOM , JavaScript için bir API'dir (Programlama Arayüzü) :
- JavaScript, HTML öğeleri ekleyebilir/değiştirebilir/kaldırabilir
- JavaScript, HTML niteliklerini ekleyebilir/değiştirebilir/kaldırabilir
- JavaScript, CSS stilleri ekleyebilir/değiştirebilir/kaldırabilir
- JavaScript, HTML olaylarına tepki verebilir
- JavaScript, HTML olaylarını ekleyebilir/değiştirebilir/kaldırabilir
HTML DOM (Belge Nesne Modeli)
Bir web sayfası yüklendiğinde, tarayıcı sayfanın bir Belge Nesne Modeli oluşturur .
HTML DOM modeli, bir Nesneler ağacı olarak oluşturulur :
Nesnelerin HTML DOM Ağacı
HTML Öğelerini Bulma
JavaScript ile HTML öğelerine erişmek istediğinizde, önce öğeleri bulmanız gerekir.
Bunu yapmak için bir çift yol var:
- kimliğe göre HTML öğeleri bulma
- Etiket adına göre HTML öğelerini bulma
- HTML öğelerini sınıf adına göre bulma
- CSS seçicileri tarafından HTML öğelerini bulma
- HTML nesne koleksiyonlarına göre HTML öğeleri bulma
Kimliğe göre HTML Öğesi Bulma
DOM'da bir HTML öğesini bulmanın en kolay yolu, öğe kimliğini kullanmaktır.
Bu örnek, id="intro" olan öğeyi bulur:
Örnek
var myElement = document.getElementById("intro");
Öğe bulunursa, yöntem öğeyi bir nesne olarak döndürür (myElement içinde).
Öğe bulunamazsa, myElement null içerecektir.
Etiket Adına Göre HTML Öğelerini Bulma
Bu örnek, tüm <p> öğelerini bulur:
Örnek
var x = document.getElementsByTagName("p");
Bu örnek, id="main" içeren öğeyi bulur ve ardından "main" içindeki tüm <p> öğelerini bulur:
Örnek
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Sınıf Adına Göre HTML Öğelerini Bulma
Aynı sınıf adına sahip tüm HTML öğelerini bulmak istiyorsanız, getElementsByClassName() öğesini kullanın.
Bu örnek, class="intro" içeren tüm öğelerin bir listesini döndürür.
Örnek
var x = document.getElementsByClassName("intro");
Öğeleri sınıf adına göre bulma, Internet Explorer 8 ve önceki sürümlerde çalışmaz.
CSS Seçicileri ile HTML Öğelerini Bulma
Belirtilen bir CSS seçiciyle (kimlik, sınıf adları, türler, nitelikler, nitelik değerleri vb.) eşleşen tüm HTML öğelerini bulmak istiyorsanız, querySelectorAll() yöntemini kullanın.
Bu örnek, class="intro" içeren tüm <p> öğelerinin bir listesini döndürür.
Örnek
var x = document.querySelectorAll("p.intro");
querySelectorAll() yöntemi, Internet Explorer 8 ve önceki sürümlerde çalışmaz.
HTML Nesne Koleksiyonları ile HTML Öğelerini Bulma
HTML nesne koleksiyonlarına da erişilebilir:
HTML DOM Eğitimi
Tam HTMLDOM Eğitimi
Bu, HTMLDOM'a kısa bir giriş olmuştur.
Tam bir HTMLDOM eğitimi için W3Schools HTMLDOM Eğitimi'ne gidin .