HTML - DOM

DOM svojstvo	vrijednos koju vraća	objašnjenje
`firstChild`	čvor prvog potomka	svi potomci su uključeni u `childNodes kolekciju`
`lastChild`	čvor posljednjeg potomka	vi potomci su uključeni u `childNodes kolekciju`
`nextSibling`	slijedećeg potomka od čvora roditelja	objekt
`nodeName`	ime HTML oznake	na primjer: P, FONT, UL.
`nodeType`	da li je čvor tekst, oznaka ili atribut	vraća 1 za oznaku, 2 za atribut, 3 za tekst.
`parentNode`	referencu na čvor roditelja	objekt
`previousSibling`	referencu na prijašnjeg potomka od čvora roditelja	objekt
`specified`	da li oznaka ima atribut postavljen	logički tip (Boolean)

Slijedeća tabela prikazuje read-write metode:

DOM svojstvo	vrijednost koju vraća	Comments
`data`	vrijednost tekst čvora	string. vraća `undefined` za sve ostale čvorove. može se postaviti.
`nodeValue`	vrijednost tekst čvora.	string. vraća `null` za sve ostale čvorove. može se postaviti..

Analiza jednog dokumenta

<HTML> <HEAD> <TITLE> jednostavni DOM primjer </TITLE> </HEAD> <BODY ID="bodyNode"><P ID ="p1Node" >Ovo je prvi paragraf</P> Ovo je tijelo dokumenta <P ID = "p2Node"> </P> <P ID = "p3Node"></P> </BODY> </HTML>

Da bi lakše shvatili samu strukturu u smislu DOM-a moramo razmišljati slično kao da bi analizirali obiteljsko stablo ili rodbinske veze. <BODY> oznaka je na čelu stabla. Ima četiri potomka (djece): tri <P> oznake koje dijele dokument u tri paragrafa i tekst između prvog i drugog paragrafa . Svaka par HTML oznake uključuje otvarajuću oznaku i zatvarajuću. Na primjer paragraf oznaka uključuje <P> oznaku te </P> oznaku . Svaki potomak je ili oznaka HTML-a ili neki tekstualni čvor. Sve što je između otvarajućih i zatvarajućih zagrada HTML oznaka su potomci te oznake. U gornjem primjeru imamo tri <P> oznake koje su zato tri čvora potomka . tekst između prvog i drugog paragrafa ("Ovo je tijelo dokumenta") predstavlja još jednog čvora potomka <BODY> oznake.

Treba primijetiti razliku u sadržaju između tri <P> oznake . Prva sadrži u sebi tekst, druga samo prazninu, a treća je prazna. Tekstualni čvor se kreira samo ako postoji barem jedan neprazan znak. Zbog toga će samo prvi paragraf imati tekstualni čvor. Iako je childNodes definiran i za drugi i treći paragraf, pri pokušaju dohvaćanja njegove vrijednsti dobit ćemo vraćeno null ili undefined vrijednost. Samu strukturu gornjeg primjera možete vidjeti na ovoj slici.

Neke HTML oznake ne uljučuju zatvarajuče zagrade. Kod takovih oznaka funkciju zatvarajućih zagrada ima zaprvao slijedeća oznaka. Na primjer <LI> oznaka. Ona se zatvara sa sijedećom <LI> oznakom ili <UL> oznakom. U takovim slučajevima te oznake (zatvarajuće) definiraju kraj sadržaja oznake i uzimaju se kao normalne zagrade kod definiranja potomaka. S druge strane oznake poput <IMG> nemaju nikakv sadržaj (samo atribute) pa nemaju ni zatvarajuće zagrade. Takove oznake stoga ne mogu imati ni potomke.

Kretanje kroz neki dokument

DOM stabla uključuju oznaku za svaki čvor i tekst. Možemo se penjati stablom samo onim čvorovima kojima su pridjeljeni ID atributi. Ipak, možemo doseći svaki čvor stabla zahvaljujući DOM-ovim moćnim svojstvima, koja su ranije objašnjena. Strelice na slici pokazuju da različitim rutama možemo doći do određenog čvora. Pridjelili smo bodyNode ID atributu oznake <BODY>. Od oznake <BODY> možemo doći do njegovog prvog potomka upotrebom bodyNode.firstChild ili bodyNode.childNodes[0], a do drugog potomka (tekstualnog čvora) bodyNode.childNodes[1] itd. Možemo također pristupiti četvrtom potomku (zadnjem) sa bodyNode.childNodes[3] ili bodyNode.lastChild.

Označili smo sve <P> oznake sa jedinstvenim ID: p1Node, p2Node i p3Node. Sada pretpostavimo da krećemo od p1Node čvora. Možemo dohvatiti drugog potomka <BODY> čvora (korijenskog čvora) sa p1Node.nextSibiling. Trećeg potomka bi dohvatili preko:

p1Node.nextSibiling.nextSibiling

a posljednjeg,

p1Node.nextSibiling.nextSibiling.nextSibiling

Ako bi četvrti potomak imao potomka (iako nema) tada bi se prvom potomku pristupilo kao:

p1Node.nextSibling.nextSibling.nextSibling.childNodes[0]

Pretpostavimo sada da krećemo sa trećem <P> čvorom, možemo se vratiti natrag na drugog upotrebom previousSibiling svojstva

p3Node.previousSibling.previousSibling.previousSibling.childNodes[0]

Ako opet krenemo sa <BODY>, on ima jednog unuka, ato je sadržaj prvog <P> čvora. Dohvaćamo ga sa

bodyNode.firstChild.firstChild

Slijedeća vrsta navigacije je od potomka prema roditelju. Ako želimo pristupiti čvoru roditelja upotrebljavamo parentNode svojstvo. Da bi došli od bilo kojeg <P> čvora do <BODY> oznake koristili bi p1Node.parentNode, p2Node.parentNode ili p3Node.parentNode

Možemo ići u krug od <BODY> čvora do unuka i natrag sa,

bodyNode.firstChild.firstChild.parentNode.parentNode

Kreiranje elemenata

Kreiranje čvorova je onogučena sa setom metoda koje se upotrebljavaju nad document objektom. Te metode su:

createElement(Strint tip): Kreira novi element određenog tipa i vraća referencu na taj element
createTextNode(String tekst): Kreira novi tekstualni čvor sa sadržajem koji je specificiran kao tekst

createElement

Kreiranje novog elementa (čvora) je jako jednostavno. Samo se pozove createElement metoda sa tipom elementa kojeg želimo kreirati. Dobro je povratnu vrijednost metode (referencu) pridijeliti nekoj varijabli ako više puta upotrebljavamo taj element:

var noviPara = documant.createElement("P");

createTextNode

Tekstualni čvor možemo kreirati na sličan način, sa createTextNode metodom, tako da joj kao parametar damo sam tekst koji želimo:

var noviTekst = document.createTextNode("Ovo je neka rečenica");

Ta dav čvora koja smo stvorili se ne mogu još vidjeti una samoj stranici jer nisu umetnuta u samo stablo, na neku poziciju.

Svaki čvor (kao objekt) nasljeđuje metodu appendChild, koja omogučuje umetanje čvora na određeno mjesto. Na primjer možemo umetnuti novi čvor koji smo gore kreirali (noviTekst) u paragraf koji smo također kreirali:

noviPara.appendChild(noviTekst);

Sada možemo sam paragraf staviti negdje u sam dokument na željenu poziciju. To možemo napraviti na nekoliko načina napr. sa getElementsByTagName metodom:

var bodyRef = document.getElementsByTagName("body").item(0);

bodyRef.appendChild(noviPara);

Iitem(0) metoda je nužna jer getElementsByTagName vraća kolekciju elemenata (polje) koje nađe sa specificiranom oznakom. Budući da u HTML dokumentima postoji samo jedna "body" oznaka item se koristi da se uzme ona prva.

Drugi standardni način da se referencira tijelo(body) dokumenta je upotreba getElementById metode. Međutim ona podrazumijeva da smo pridijelili ID atribute <BODY> oznaci:

var bodyRef = document.getElementById("docBody");

bodyRef.appendChild(noviPara);

umetanje čvorova u određenu sekvencu

Do sada smo vidjeli da appendChild metoda uvijek stavlja nove čvorove kao posljednje potomke roditeljskog čvora. Međutim ponekad želimo umetnuti neki čvor između određenih potomaka, insertBefore metoda nam to omogućuje. Ona uzima dva argumenta: čvor kojeg umećemo i čvor ispred kojeg želimo da se on nalazi. Slijedeći primjer upotrebljava insertBefore za umetanje novog <TD> elementa prije treće <TD> oznake u HTML tabeli:

<table border="1">
<tr id="primjer4">
<td>TD Jedan</td>
<td>TD Dva</td>
<td>TD Tri</td>
</tr>
</table>

<script type="text/javascript">

var TDCount = 0;

function insertTD(){

var noviTD = document.createElement("td");
var newText = document.createTextNode("Nova čelija " + (TDCount++));
newTD.appendChild(noviText);

var trElem = document.getElementById("primjer4");
var refTD = trElem.getElementsByTagName("td").item(2);
trElm.insertBefore(noviTD,refTD);

}
</script>

Ovdje možemo isprobati naš primjer:

TD Prvi

TD drugi

TD treci

Možete pogledati konkretno na djelu DOM tehnologiju implementiranu pomoću JavaScripta. To su u biti dvije igre, popularna zmija te jedna slagalica