Yazan : Şadi Evren ŞEKER
DOM yani İngilizcedeki Document Object Modelling veya Türkçe karşılığı ile Doküman Nesne Modellemesi basitçe bir işaretleme dili (genellikle HTML veya XML gibi bir dil) için etiketlere (tags) erişmeyi sağlayan bir erişim yöntemidir.
Günümüzde SAX ve DOM en yaygın olarak kullanılan erişim yöntemledir. SAX daha çok tek seferde işlenen ve ardışık olarak etiketlere erişileceği durumlarda kullanılır. DOM ise bir dokümanı ağaç yapısına benzer şekilde ele alır ve bir ağacın çocuklarına (children) erişir gibi dokümandaki etiketlere erişim sağlar.
Öncelikle DSO ile bir xml dosyasında yapabileceğimiz işlemleri inceleylim:
DSO: Data Shared Object
xml dokumanlari aslinda birer DSOdur. Yani ufak birer databasedirler.HTML dokumanlarinin ise bu DSO’lari kullanmasi mumkundur. Bir html dokumaninin icine:
<XML ID=”dsoBook” SRC=”http://www.shedai.net/documents/Book.xml”>
</XML>
seklinde bir satir eklerseniz, bu xml dokumanina html komutlariyla erisiminiz mumkun olur.
Database konularindan bilindigi uzere: Her tablonun alanlari vardir. Ve her kayit bu tablodaki alanlari doldurur. Mesela: calisan tablosu:
|
ISIM |
SOYISIM |
BOLUM |
||
|
Ali |
Gelir |
14 |
||
|
Selami |
Gider |
– |
||
|
Veli |
Bakar |
10 |
||
Seklindeki bir tabloda, ISIM, SOYISIM, BOLUM gibi bilgiler birer alandir. [ali,gelir,14],[selami,gider,-] gibi bilgilerde kayittir.
XML dokumaninin database gibi kullanilmasina gelince, her xml dokumani bir tablo, her yeni komut bit kayit, ve her komutun alt komutu da birer alandir. Yani yukaridaki tabloyu xml’e uyarlarsak:
<calisan>
<eleman>
<isim>ali</isim>
<soyisim>gelir</soyisim>
<bolum>14</bolum>
</eleman>
<eleman>
<isim>Selami</isim>
<soyisim>Gider</soyisim>
</eleman>
<eleman>
<isim>Veli</isim>
<soyisim>Bakar</soyisim>
<bolum>10</bolum>
</eleman>
</calisan>
seklinde bir xml dokumani elde ederiz.
Peki bir html komutunu, bir xml komutuna nasil baglariz?
Iki turlu baglamamiz mumkun.
- Tablo bazli baglama
- Kayit bazli baglama
Once tablo baglamaya bakalim. Simdi bizim mesur inventory.xml dosyasi icin bir html olusturalim.
|
<!– File Name: Inventory Table.htm –> <HTML> <HEAD> <TITLE>Book Inventory</TITLE> </HEAD> <BODY> <XML ID=”dsoInventory” SRC=”Inventory.xml”></XML> <H2>Book Inventory</H2> <TABLE DATASRC=”#dsoInventory” BORDER=”1″ CELLPADDING=”5″> <THEAD> <TH>Title</TH> <TH>Author</TH> <TH>Binding</TH> <TH>Pages</TH> <TH>Price</TH> </THEAD> <TR ALIGN=”center”> <TD><SPAN DATAFLD=”TITLE” STYLE=”font-style:italic”></SPAN></TD> <TD><SPAN DATAFLD=”AUTHOR”></SPAN></TD> <TD><SPAN DATAFLD=”BINDING”></SPAN></TD> <TD><SPAN DATAFLD=”PAGES”></SPAN></TD> <TD><SPAN DATAFLD=”PRICE”></SPAN></TD> </TR> </TABLE> </BODY> </HTML> |
Bu kodun calisan hali asagidadir:
Buradaki en onemli satir:
<TABLE DATASRC=”#dsoInventory” …
satiridir. Bu satirla, table komutumuzun bilgileri #dsoInventory’den okumasi gerektigini soyluyoruz. (ki #dsoInventory daha oncede belirttigimiz gibi <XML ID=”dsoInventory” SRC=”Inventory.xml”></XML> satiriyla tanimlanmis bir xml kaynagidir.)
Peki html bu alanlardan hangisini table’in hangi bolmesine yazacagini nasil anliyor?
Iste bunu yapanda <TD><SPAN DATAFLD=”AUTHOR”></SPAN></TD> seklindeki satirlar.
Biraz daha HTML baglantisi
Simdi bu xml, html baglantisini bir adim daha ileri goturerek, asagidaki goruntuyu elde etmeye calisalim:
Yukaridaki goruntuyu elde etmek icin, ONCLICK ozellikleri ve DATAPAGESIZE=”5″ gibi yeni komutlari iceren asagidaki kodu yazmamiz gerekiyor.
|
<HTML> <BODY> <XML ID=”dsoInventory” SRC=”Inventory Big.xml”></XML> <H2>Book Inventory</H2> <BUTTON ONCLICK=”InventoryTable.firstPage()”> |< First Page </BUTTON> <BUTTON ONCLICK=”InventoryTable.previousPage()”> < Previous Page </BUTTON> <BUTTON ONCLICK=”InventoryTable.nextPage()”> Next Page > </BUTTON> <BUTTON ONCLICK=”InventoryTable.lastPage()”> Last Page >| </BUTTON> <p> <TABLE ID=”InventoryTable” DATASRC=”#dsoInventory” DATAPAGESIZE=”5″ BORDER=”1″ CELLPADDING=”5″> <THEAD> <TH>Title</TH> <TH>Author</TH> <TH>Binding</TH> <TH>Pages</TH> <TH>Price</TH> </THEAD> <TR ALIGN=”center”> <TD><SPAN DATAFLD=”TITLE” STYLE=”font-style:italic”></SPAN></TD> <TD><SPAN DATAFLD=”AUTHOR”></SPAN></TD> <TD><SPAN DATAFLD=”BINDING”></SPAN></TD> <TD><SPAN DATAFLD=”PAGES”></SPAN></TD> <TD><SPAN DATAFLD=”PRICE”></SPAN></TD> </TR> </TABLE></BODY></HTML> |
JavaScript kullanarak XML uzerinde arama yapmak:
<XML ID=”dsoInventory” SRC=”Inventory Big.xml”></XML>
<H2>Find a Book</H2>
Title text: <INPUT TYPE=”TEXT” ID=”SearchText”> 
<BUTTON ONCLICK=’FindBooks()’>Search</BUTTON>
<HR>
Results:<P>
<DIV ID=ResultDiv></DIV>
<SCRIPT LANGUAGE=”JavaScript”>
function FindBooks ()
{
SearchString = SearchText.value.toUpperCase();
if (SearchString == “”)
{
ResultDiv.innerHTML = “<You must enter text into ”
+ “‘Title text’ box.>”;
return;
}
dsoInventory.recordset.moveFirst();
ResultHTML = “”;
while (!dsoInventory.recordset.EOF)
{
TitleString = dsoInventory.recordset(“TITLE”).value;
if (TitleString.toUpperCase().indexOf(SearchString)
>=0)
ResultHTML += “<I>”
+ dsoInventory.recordset(“TITLE”)
+ “</I>, ”
+ “<B>”
+ dsoInventory.recordset(“AUTHOR”)
+ “</B>, ”
+ dsoInventory.recordset(“BINDING”)
+ “, ”
+ dsoInventory.recordset(“PAGES”)
+ ” pages, ”
+ dsoInventory.recordset(“PRICE”)
+ “<P>”;
dsoInventory.recordset.moveNext();
}
if (ResultHTML == “”)
ResultDiv.innerHTML = “<no books found>”;
else
ResultDiv.innerHTML = ResultHTML;
}
</SCRIPT>
XML dokumanlarini nasil JavaScript ve dom yardimiyla kullaniriz bir bakalim.
Bir html sayfasina DSO eklemeyi yukaridaki orneklerde gosterdik. Simdi asagidaki ornek html kodunu inceleyelim.
<SCRIPT LANGUAGE=”JavaScript” FOR=”window” EVENT=”ONLOAD”>
Document = dsoBook.XMLDocument;
title.innerText=
Document.documentElement.childNodes(0).text;
author.innerText=
Document.documentElement.childNodes(1).text;
binding.innerText=
Document.documentElement.childNodes(2).text;
pages.innerText=
Document.documentElement.childNodes(3).text;
price.innerText=
Document.documentElement.childNodes(4).text;
</SCRIPT>
Yukaridaki kod, JavaScript ile DOM parser’ini kullanarak, XML dokumanina erisiyor. DOM, xml dokumanlarini parcalarken agac yapisina benzer bir yapi kullanir. Ve her yeni xml komutu (database mantigina gore kayidi) birer childNode olur.
Ornegin yukaridaki sekilde her bir book ogesi documentElement’in birer childNode’udur. Ve her book ogesininde beser adet childNode’u vardir.