Dom yani Orjinal acilimi ile Document Object Model (Belge Nesne Yapısı) Ajax ‘in yapi taşlarindan birisidir. hazırladığınız web sayfasini internet tarayicisinda actiginizda tarayiciniz (Internet Explorer, Firafox, opera vb..) bu sayfayi bir dokuman (belge) olarak kabul ederler ve bu belde bulunan tum taglar hiyerarsik bir yapiya sahiptir örnegin ;

<div><ul><li><h3>yazi</h3></li><ul><div>

yani Div icinde –> liste –> listenin icinde –> h –> baslik (header) icinde yazimiz var.

iste Dom bu noktada html dokumani icerisindeki taglar ulamamizi saglar.

Daha önceden nesle tabanli bir programla dili kullandiysaniz Dom ‘u daha rahat kavrayabilaceginize eminim. Dom ‘u kisaca özetlemek gerekirse html veya xml dosyasi üzerindeki tüm nesnelere ulasir ve bu nesneler üzerinde islem yapma imkani sunar. Örnegin bir resimin width degerini degisterebilir veya bir form icindeki textbox ‘tan dagerini alabiliriz.

Dom ‘un islemesi icin iki ana faktör vardir birincisi sitenin temel dili yani Html duruma göre Xml ‘de olabilir ve birde dom ‘u isletecek bir isletme diline ihtiyac vardir. Isletme dili olarak genel olarak Javascript kullanilsada asp, php, python,jsp vb.. gibi server tabanli dillerde olarabilir hatta Php 5 ‘in en önemli yeniliklerinde bir tanesi bünyesinde Dom sinifi barindiriyor olmasi. Bu son yadiklarimdan sonra hakli olarak “Dom bir programlama dili degilmi ?” seklinde bir soru takilabilir. Dom kesinlikle bir programlama dili degil dom aslinda bir web saysinin kaynagidir daha dogrusu hazirlamis oldugunuz sayfanin yapisidir.

Isterseniz örneklerle anlatarak Dom ‘u kavramaya calisalim ;

Ilk browserler web sayfasini bir dokuman olarak kabul eder yazmistim. bu sebeple Dom hiyerarsisinde en yukaridaki kurum document ‘tir

document.

sonrasinda dokuman icerisindeki nesnelerimiz gelir;

document.form.textbox.

sonrasinda da bu neslenin özelligi gelir;

document.form.textbox.value

söyle bir kod yazalim

<script type="text/javascript"><!--
document.form.textbox.value = "Hüseyin Kocak"
// --></script>

<form method="post"><input type="hidden" name="phpMyAdmin" value="f440fff25b4385491896ff1d87719d2c" /> <input id="isim" type="text" /> </form>

burada form ‘un icindeki textbox ‘un degerini Hüseyin Kocak yaptik ve textbox ‘un bu özelligine Dom ile ulasmis olduk. bu durumda kutucuk icerisinde verdigimiz deger yazacaktir.

Sanirim bu örnekten sonra Dom ‘un ne oldugunu ve ne isie yaradigini daha iyi anladiniz.

Yukarida örnekte textbox ‘a hiyerarsik bir yapiyla tag isimleri araciligi ile ulastiniz fakat ayni islemi id araciligi ile yapabilirdik.

Simdi ayni örnegi bir kez daha yapalim

<script type="text/javascript"><!--
document.getElementById('isim').value = "Hüseyin Kocak"
// --></script>

<form method="post"><input type="hidden" name="phpMyAdmin" value="f440fff25b4385491896ff1d87719d2c" /> <input id="isim" type="text" /> </form>

Dokumanin getElementById özelligini kullanarak id ‘si isim olan nesnenin degerine ulasmis olduk. Islev olarak yukaridaki örnekle tamamen aynidir fakat nesnelere Id ile ulasmak daha yaygindir ayrica ileri derslerimizde bol bol görecegimiz örneklerde nesneyi id ile bulup islemenin farklarini daha iyi kavrayacaksiniz

Ayrica nesnelere ait bir cok özellik mevcuttur size bir fikir vermesi acisindan bunlardan birkac tanesini yazacak olursak;

- title –> bu özellik ile web sayfanizin veya nesnenin basligini degistirebilirsiniz.

document.title = "Web SayfasininBasligini Degistirdim"

- className –> nesnenin css icin class ‘ini degistirir

document.div.className = "kirmizi"

- width –> nesnenin genislik ebatini verir

resimin_genisligi = document.resimim.width

Tabiki Dom bünyesinde bir cok nesne özelligi vardir yukarida saydiklarin bunlardan sadece birkac tanesi. Ilerleyen derslerde Dom ‘un diger özelliler ve örneklerle Dom derslerine devam edecegim.