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
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
