Bu yazımda DOM nedir ve Html DOM nedir konularını anlatacağım. Daha sonraki yazılarımda ise JavaScript ile Html DOM öğelerine nasıl erişebiliriz, eriştiğimiz bu Html öğeleri üzerinde istediğimiz manipülasyonları nasıl gerçekleştirebiliriz onları öğreneceğiz.
DOM Nedir?
DOM, belgelere erişmek için bir standart tanımlar. Başka bir deyişle;
DOM (Belge Nesne Modeli), programların ve komut dosyalarının bir belgenin içeriğine, yapısına, stiline dinamik olarak erişmesine ve güncelleştirmesine izin veren dilden bağımsız bir ara birimdir. DOM’un açılımı Document Object Model‘dir.
DOM standardı 3 farklı parçaya ayrılmıştır. Bunlar:
- Core DOM : Tüm belge türleri için standart model
- XML DOM : XML belgeleri için standart model
- Html DOM : Html belgeleri için standart model
Bugün Html DOM konusunu inceleyeceğiz.
Html DOM Nedir?
Html DOM, Html belgesindeki öğeleri alma, değiştirme, ekleme veya silme standardıdır. Html DOM modeli bir ağaç yapısındadır. Örnek bir Html DOM yapısı aşağıdaki gibidir.
Resimde gördüğünüz gibi en tepede document nesnesi bulunuyor.
Document nesnesinin içerisinde html öğesi, onun içerisinde head ve body öğeleri. İşte Html DOM bu şekilde aşağı doğru dalları olan bir ağaç yapısındadır.
Html DOM sayesinde JavaScript ile dinamik Html işlemlerini rahatlıkla yapabiliyoruz. Örneğin;
⇒ Sayfadaki tüm Html öğelerini (div, a, p vb.) veya bu öğelerin içeriğini değiştirebiliriz.
⇒ Sayfadaki tüm Html özelliklerini (id, class, href, target, title vb.) değiştirebiliriz.
⇒ Sayfadaki tüm Css stillerini değiştirebiliriz.
⇒ Sayfadaki mevcut Html öğelerini veya özelliklerini kaldırabiliriz.
⇒ Sayfaya yeni Html öğeleri veya özellikleri ekleyebiliriz.
⇒ Sayfada yeni Html olayları (fare ile tıklama vb.) oluşturabiliriz.
Umarım “DOM Nedir? Html DOM Nedir?” başlıklı yazım sizin için faydalı olmuştur.
Yeni bir yazımda görüşmek üzere.
