dom nedir?

INDENT 6HTML DOM Nedir?INDENT


DOM Document Object Model kelimesinin kısaltılmasından gelir ve Türkçe karşılığı Belge Nesne Modelidir

DOM, HTML, XML gibi belgelerin diğer programlama dilleri veya script dilleriyle iletişim kurabilmesini sağlamak için geliştirilmiş bir arabirimdir

Programlama dillerinde sıkça karşımıza çı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 göre bir HTML sayfası içerisinde bulunan etiketleri (tag)kapsar





Yukarıdaki görselde olduğu gibi HTML sayfasında bulunan head, body, h1, img 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 birçok dile destek verir

Örnek olarak web projelerinde sıkça kullandığımız Javascript ile bir DOM elemanıyla iletişim kuralım

INDENT 6Örnek 1INDENT

html

head

titleDom Örneği | bilgilihocamcomtitle

script type textjavascript

function renkDegistir(Obj)

{

Objstyleborder '1px solid red';

}

script

head

body

style border:solid 1px #333;onMouseOver renkDegistir(this)

DOM Örneği



body

html

1) Yukarıdaki örnekte bir HTML belgesi içerisine html, head,body, gibi etiketler tanımladık

2) etiketi ile Javascript kodumuzun iletişimi için etiketine onMouseOver özelliği tanımladık ve bu özelliği renkDegistir() adında bir Javascript fonksiyonuna (this) ifadesiyle gönderdik

3) Javascript kodumuzda Obj parametresi ile hangi etiketten geldiğini belirledik ve o etikete Objstyleborder ‘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 özellikler (attribute) tanımlayarak da yapabiliriz

Bir başka örnek daha yaparak DOM yapısını daha yakından tanıyalım



INDENT 6Örnek 2INDENT


Bu örnekte bir web programlama dili olan PHP’yi kullanalım

formhtml

html

head

titlePHP ile DOM | Mediaclickcomtrtitle

head

body

form method POST action postphp

input type textname name

input type textname surname

input type submitvalue Gönder

form

body

html

postphp

?php

if(isset($POST))

{

$name $POST‘name’;

$surname $POST‘surname’;

echo “Adınız : $name“ Soyadınız : $surname;

}

1) Yukarıdaki örnekte yine bir HTML belgesi içerisinde bazı etiketler kullandık

2) Form etiketi içerisinde iki adet inputumuz var Bu inputları action postphp ifadesiyle postphp adında bir php dosyasına gönderiyoruz

3) postphp dosyasında da inputlardan gelen ifadeleri name özelliğiyle yakalayıp değişkene atıyoruz ve ekrana basıyoruz

Bu makalemiz ile birlikte genel anlamda DOM nedir sorusuna cevap aramaya çalıştık İki örnek ile DOM yapısını kullanarak HTML ile javascript ve PHP gibi dillerin haberleşmesini sağladık

Umarım faydalı bir makale olmuştur bir sonraki yazıda görüşmek dileğiyle