Download
1 / 74
740 likes | 993 Views
HTML DOM – Document Object Model. HTML DOM predstavlja programski interface za html dokumente HTML DOM omogućava pristup i kontrolu svih html elemenata na web strani, tj. kreiranje dinamičkih web strana kod kojih se može očitavati i menjati sadržaj, struktura i stil html dokumenta
E N D
HTML DOM – Document Object Model HTML DOM predstavlja programski interface za html dokumente HTML DOM omogućava pristup i kontrolu svih html elemenata na web strani, tj. kreiranje dinamičkih web strana kod kojih se može očitavati i menjati sadržaj, struktura i stil html dokumenta HTML DOM je W3C standard HTML DOM definiše objekte i svojstva svih html elemenata dokumenta – web strane kao i metode za pristup HTML DOM je standard za pristup, izmenu, dodavanje i brisanje HTML elemenata
DOM nodes - čvorovi • Html dokument u RAM memoriji browser-a kreira hijerarhijski sistem objekata – čvorova koji odgovaraju html elementima i predstavljaju strukturu html elemenata na web strani • Html dokument predstavlja čvor – objekat dokumenta • Hijerarhija html elemenata na web strani se preslikava – predstavlja odgovarajućom hijerarhijom DOM čvorova • Tekst u html elementima odgovara text čvorovima • Atributi html elemenata odgovaraju atributima čvorova • Html komentari odgovaraju čvorovima komentarima
Struktura html dokumenta i ekvivalentna strukura DOM čvorova Osnovni – koreni čvor je <html> Čvorovi <head> i <body> su potomci čvora <html> Čvor <title> je potomak čvora <head> Čvorovi <h1> i <p> su potoci čvora <body> Tekst unutar html elemenata se nalazi u text čvoru potomku odgovarajućeg elementa Html dokument određuje korespodentnu strukturu DOM čvorova • <html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body></html>
Svojstva i metodi html DOM čvorova • html DOM čvorovima se može pristupiti iz programskog jezika – JavaScript-a ili nekog drugog Neki HTML DOM Metodi x.getElementById(id) - element sa id x.getElementsByTagName(ime) – svi elementisadatimimenom tag-a x.appendChild(čvor) - umećečvorpotomaku x x.removeChild(node) - uklanjačvorpotomak od x x je objekat koji odgovara nekom DOM čvoru Neka HTML DOM Svojstva x.innerHTML - text vrednost od x x.nodeName - the ime x-a x.nodeValue - vrednost x-a x.parentNode - roditeljskičvor x-a x.childNodes – čvor potomak od x-a x.attributes - atributi nodes of x x je objekat koji odgovara nekom DOM čvoru Iako innerHTML svojstvo ne pripada specifikaciji W3C DOM standarda, podržavaju ga svi glavni browser-i. Omogućava jednostavno dobijanje tekstualnog sadržaja html elemenata.
Pristup html DOM čvorovima • html DOM čvorovima se može pristupiti na tri osnovna načina: • 1. korišćenjem getElementById() metoda • 2. korišćenjem getElementsByTagName() metoda • 3. Navigacijom duž stabla čvorova, koristeći hijerarhijske odnose čvorova
