DOM, HTML, XML gibi belgelerin diğer programlama dilleri veya script dilleriyle iletişim kurabilmesini sağlamak icin geliştirilmiş bir arabirimdir.
Programlama dillerinde sıkca karşımıza cıkan Object Oriented yaklaşımı da bu yapıya benzerdir. Object Oriented yaklaşımında kullandığımız nesneler yada sınıflar, DOM yapısına gore bir HTML sayfası icerisinde bulunan etiketleri (tag) kapsar.
Yukarıdaki gorselde olduğu gibi HTML sayfasında bulunan , , , gibi etiketler birer DOM nesneleridir.
DOM sayesinde HTML veya XML elemanları ile programlama veya script dilleri arasında haberleşme sağlayarak daha etkileşimli web siteler yapılabilmesini sağlanır.
DOM, Javascript, PHP, ASP, Java vb. bircok dile destek verir.
Ornek olarak web projelerinde sıkca kullandığımız Javascript ile bir DOM elemanıyla iletişim kuralım.
Ornek 1 Genişletmek icin tıkla ... ornek.html
Kod: Dom Orneği | Mediaclick.com.tr DOM Orneği
1-) Yukarıdaki ornekte bir HTML belgesi icerisine , ,, gibi etiketler tanımladık.
2-) etiketi ile Javascript kodumuzun iletişimi icin etiketine onMouseOver ozelliği tanımladık ve bu ozelliği renkDegistir() adında bir Javascript fonksiyonuna (this) ifadesiyle gonderdik.
3-) Javascript kodumuzda Obj parametresi ile hangi etiketten geldiğini belirledik ve o etikete Obj.style.border = ‘1px solid red’ diyerek yeni bir stil kazandırdık.
NOT : Ayrıca, DOM nesnelerine (this) gibi parametre kullanarak iletişim kurabildiğimiz gibi, id, name, class gibi ozellikler (attribute) tanımlayarak da yapabiliriz.
Bir başka ornek daha yaparak DOM yapısını daha yakından tanıyalım.
Ornek 2 Genişletmek icin tıkla ...
Bu ornekte bir web programlama dili olan PHP’yi kullanalım.
form.html
Kod: PHP ile DOM | Mediaclick.com.tr
post.php
Kod: