SKRIPTA ZA VEBE IZ PREDMETA INTERNET TEHNOLOGIJE

JavaScript, DOM i XML Laboratorija za elektronsko poslovanje

Beograd 2008. SADRAJ1 XML DOM TUTORIAL................................................................5 1.1 UVOD U XML DOM.................................................................................5 1.2 TA JE DOM?.........................................................................................5 1.3 TA JE HTML DOM?...............................................................................6 1.4 W3C DOM SPECIFIKACIJE...........................................................................6 1.5 TA JE XML DOM?.................................................................................8 1.6 XML VOROVI.........................................................................................9 1.6.1 vorovi.........................................................................................9 1.6.2 Hijerarhija vorova.......................................................................9 1.6.3 Primeri hijerarhije DOM vorova...................................................9 1.7 XML DOM STABLO VOROVA.....................................................................11 1.8 XML DOM PRISTUP VOROVIMA..................................................................12 1.8.1 getElementsByTagName()..........................................................12 1.8.2 nodeList......................................................................................12 1.8.3 parentNode, firstChild, and lastChild..........................................13 1.8.4 Koren vorova document.documentElement.............................13 1.9 XML DOM INFORMACIJE O VOROVIMA.........................................................14 1.9.1 nodeName..................................................................................14 1.9.2 nodeValue...................................................................................14 1.9.3 nodeType....................................................................................14 1.10 XML DOM LISTA VOROVA I NAMEDNODEMAP..............................................15 1.10.1 DOM lista vorova....................................................................15 1.10.2 DOM NamedNodeMap..............................................................16 1.10.3 Odreivanje stavki objekta NamedNodeMap...........................17 1.11 PARSIRANJE XML DOM-A.......................................................................18 1.11.1 Parsiranje XML DOM-a..............................................................18 1.11.2 Microsoft-ov XML parser...........................................................18 1.11.3 XML parseri u Mozilla-i, Firefox-u i Opera-i...............................19 1.11.4 Parsiranje XML stringa cross-browser primer........................20 1.12 XML DOM PREVOENJE STABLA VOROVA....................................................22 1.12.1 Prevoenje stabla vorova.......................................................22 1.13 XML DOM MOZILLA VS. INTERNET EXPLORER...............................................23 1.13.1 Razlike u browser-ima prilikom DOM parsiranja.......................23 1.14 XML DOM NAVIGACIJA VOROVA...............................................................24 1.14.1 Navigacija DOM vorova...........................................................24 1.14.2 Uzimanje prvog deteta voru...................................................24 1.14.3 Uzimanje prethodnog brata vora............................................25 2 XML DOM OBRADA VOROVA.................................................26 2.1 XML DOM UZIMANJE VOROVA..................................................................26 2.1.1 Uzimanje vrednost elementa......................................................26 2.1.2 Uzimanje vrednosti atributa.......................................................26 2.1.3 Uzimanje vrednosti stavke.........................................................27 2.2 XML DOM POSTAVLJANJE VOROVA..............................................................282

2.2.1 Primeri........................................................................................28 2.2.2 Promena vrednosti atributa........................................................28 2.2.3 Promena vrednosti stavke..........................................................29 2.3 XML DOM UKLANJANJE VOROVA................................................................29 2.3.1 Uklanjanje elementa..................................................................29 2.3.2 Uklanjanje teksta iz elementa....................................................30 2.3.3 removeAttributeNode()...............................................................30 2.4 XML DOM ZAMENA VOROVA....................................................................30 2.4.1 Zamena vora u listi vorova.....................................................30 2.4.2 Zamena teksta u tekst voru......................................................31 2.5 XML DOM KREIRANJE VOROVA..................................................................33 2.5.1 Kreiranje elementa.....................................................................33 2.5.2 Kreiranje atributa........................................................................33 2.5.3 Kreiranje tekst vora..................................................................33 2.5.4 Kreiranje CDATA sekcija vora...................................................34 2.5.5 Kreiranje komentar vora...........................................................34 2.6 XML DOM DODAVANJE VOROVA,...............................................................35 2.6.1 Dodavanje vora na kraj liste vorova.......................................35 2.6.2 Dodavanje vora ispred odreenog vora..................................35 2.6.3 Postavljanje novog atributa i vrednosti atributa.........................36 2.6.4 Dodavanje podataka u tekst vor...............................................36 2.7 XML DOM KLONIRANJE VOROVA................................................................37 2.7.1 Kopiranje vora...........................................................................37 3 XML DOM REFERENCE...........................................................38 3.1 XML DOM TIPOVI VOROVA......................................................................38 3.1.1 Tipovi vorova povratne vrednosti..........................................39 3.2 XML DOM NODE OBJEKAT.......................................................................40 3.2.1 Svojstva Node objekta................................................................40 3.2.2 Metode Node objekta..................................................................41 3.3 XML DOM NODELIST OBJEKAT..................................................................42 3.3.1 Svojstva NodeList objekta..........................................................42 3.3.2 Metode NodeList objekta............................................................42 3.4 XML DOM NAMEDNODEMAP OBJEKAT.........................................................43 3.4.1 Svojstva NamedNodeMap objekta..............................................43 3.4.2 Metode NamedNodeMap objekta...............................................43 3.5 XML DOM DOCUMENT OBJEKAT.................................................................44 3.5.1 Svojstva Document objekta........................................................44 3.5.2 Metode Document objekta.........................................................45 3.6 XML DOM DOCUMENTIMPLEMENTATION OBJEKAT..............................................47 3.7 XML DOM DOCUMENTTYPE OBJEKAT...........................................................47 3.8 XML DOM PROCESSINGINSTRUCTION OBJEKAT.................................................47 3.9 XML DOM ELEMENT OBJEKAT....................................................................49 3.9.1 Svojstva Element objekata.........................................................49 3.9.2 Metode Element objekta.............................................................50 3.10 XML DOM ATTR OBJEKAT......................................................................53 3.11 XML DOM TEXT OBJEKAT......................................................................54 3.11.1 Svojstva Text objekta...............................................................54 3.11.2 Metode Text objekta.................................................................543

3.12 XML DOM CDATASECTION OBJEKAT........................................................55 3.12.1 CDADASection objekat.............................................................55 3.12.2 Svojstva CDATASection objekta...............................................55 3.12.3 Metode CDATASection objekta.................................................55 3.13 XML DOM COMMENT OBJEKAT.................................................................56 3.13.1 Comment objekat.....................................................................56 3.13.2 Svojstva Comment objekta.......................................................56 3.13.3 Metode Comment objekta........................................................56 3.14 HTTPREQUEST OBJEKAT............................................................................57 3.14.1 Da li je XMLHttpRequest objekat W3C standard?.....................57 3.14.2 Zato koristimo async u naim promerima?.............................58 3.15 XML/ASP.........................................................................................59 3.16 XMLHTTPREQUEST OBJEKAT REFERENCE........................................................59 3.16.1 Metode......................................................................................59 3.16.2 Svojstva....................................................................................60 3.17 XML DOM PARSER GREAKA...................................................................61 3.17.1 parseError objekat....................................................................61 3.17.2 Svojstva parseError objekta.....................................................61 4 PRILOG - PRIKAZIVANJE XML-A POMOU XSL-A.......................62 4.1 PRILOGFORMATIRANJE NARUDBENICE.............................................................63

4

1 XML DOM tutorial1.1 Uvod u XML DOMXML Document Object Model (XML DOM) definie standard za pristup i manipulaciju XML dokumentima. DOM posmatra XML dokument kroz strukturu stabla (stabla vorova) sa elementima, atributima i tekstom definisanim kao vorovi.Koreni element Roditelj Dete Atribut rb"

Element

Element

Element

Tekst: 12.11.2008

Element

Atribut uloga"

Element

Atribut rb"

Element

Element

Element

Element

Element

Element

Element

Element

Element

Element

Tekst: Fakultet organizaci onih nauka

Tekst: Jove Ilica 154

Tekst: nabavka @fon.rs

Tekst: 011 / 3950800

Tekst: Jovan Jovanovi

Tekst: DVD Verbatim

Tekst: 43522

Tekst: kom

Tekst: 20

Tekst: 100

Slika 1 Primer XML DOM stable vorova

1.2 ta je DOM?W3C Document Object Model (DOM) je platformski i jeziki neutralan interfejs koji dozvoljava programima i skriptovima da dinamiki pristupaju i auriraju kontekst, strukturu i stil dokumenta. W3C DOM obezbeuje standardan skup objekata za HTML i XML dokumente i standardan interfejs za pristup i manipulaciju ovakvim objektima. W3C DOM je podeljen na razliite delove (Core, XML i HTML) i razliite nivoe (DOM nivo 1, 2 i 3): Core DOM definie standardni skup objekata za svaki strukturirani dokument XML DOM definie standardni skup objekata za XML dokumente HTML DOM definie standardni skup objekata za HTML dokumente

5

1998. godine W3C standard je objavio Nivo 1 DOM specifikaciju. Specifikacija je dozvoljavala da se pristupa i obrauje svaki pojedinani element na HTML strani. Svi brauzeri su ubrzo prihvatili ovu preporuku, pa su, na taj nain, nekompatibilnosti u DOM-u skoro potpuno nestale. JavaScript moe da koristi DOM kako bi se itali i menjali HTML, XHTML i XML dokumenti.

1.3 ta je HTML DOM?HTML Document Object Model (HTML DOM) definie standard za pristup i obradu HTML dokumenata. DOM predstavlja HTML dokument u strukturi stabla (stabla vorova) sa elementima, atributima i tekstom.Dokument

Koreni element

Element:

Element:

Element:

Atribut: href

Element:

Element:

Tekst: Moj naslov

Tekst: Moj link

Tekst: 30.00

Slika 2 Primer HTML DOM stabla vorova

1.4 W3C DOM specifikacijeSpecifikacija DOM Level 0 DOM Level 1 DOM Level 1 (SE) DOM Level 2 Core Odreuje API za pristup i auriranje sadraja i strukture dokumenata. API takoe sadri interfejs posveen XML-u Svrha Nije W3C standard. Definisan je kao ekvivalent onih funkcionalnosti koje se nalaze u Netscape Navigator 3.0 i Microsoft Internet Explorer-u 3.0. Koncentrie se na HTML i XML modele dokumenata. Sadri funkcionalnost navigacije i manipulacije dokumentom.

6

DOM Level 2 HTML DOM Level 2 Views DOM Level 2 Style DOM Level 2 Events DOM Level 2 Traversal-Range DOM Level 3 DOM Level 3 Requirements DOM Level 3 Core DOM Level Events DOM Level and Save DOM Level Validation DOM Level XPath DOM Level Views 3 3 Load 3 3 3

Odreuje API za obradu strukture i sadraja HTML dokumenta Odreuje API za dinamian pristup i auriranje pogleda dokumenta. Pogled je alternativna prezentacija dokumenta. Odreuje API za dinamian pristup i auriranje stilova strana (style sheet) Odreuje API za pristup dogaajima dokumenta Odreuje API za dinamian prenos i identifikovanje opsega sadraja u dokumentu Odreuje modele sadraja (DTD i Shema) i validaciju dokumenta. Takoe odreuje uitavanje i snimanje dokumenta, njegovo pregledanje, formatiranje i kljune dogaaje. Izgraen je na DOM Core Level 2 Odreuje API za pristup i auriranje sadraja, strukture i stila dokumenta

7

1.5 ta je XML DOM?Kljune osobine XML DOM-a su: XML DOM je Document Object Model za XML platformski i jeziki je nezavisan njime se definiu standardni skup objekata za XML standardni nain pristupa XML dokumentima standardan nain za manipulaciju XML dokumentima XML DOM je W3C standard

DOM posmatra XML dokumente kao strukturno stablo. Svim elementima, tekstu i atributima koje sadre, moe se pristupiti preko DOM stabla. Njihov sadraj moe da se modifikuje ili obrie, ili da se kreiraju novi elementi. Elementi, njihov tekst i atributi su pod jednim imenom poznati kao vorovi.

8

1.6 XML vorovi1.6.1 vorovi

Prema DOM-u, sve u XML-u je vor. Navodi se da: itav dokument je dokument vor Svaki XML tag je element vor Tekstovi koji se nalaze unutar XML dokumenta su tekst vorovi Svaki XML atribut je atribut vor Komentari su vorovi komentari

1.6.2

Hijerarhija vorova

vorovi imaju hijerarhijski odnos izmeu sebe. Svi vorovi u XML dokumentu formiraju stablo dokumenta (ili stablo vorova). Svaki element, atribut, tekst itd. u XML dokumentu predstavlja vor u stablu. Stablo poinje vorom dokumenta i nastavlja da se grana sve dok ne obuhvati sve tekstualne vorove na najniem nivou stabla. Termini roditelj (parent) i dete (child) se koriste da bi opisali odnos izmeu vorova. Neki vorovi mogu da imaju vorove decu, dok drugi vorovi nemaju decu (vorovi listovi). Zato to je XML dokument strukturiran u formi stabla, moe biti prenesen bez poznavanja tane strukture stabla i bez poznavanja tipova koji su sadrani u njemu.

1.6.3

Primeri hijerarhije DOM vorova

U narednom delu se daje pregled XML fajla: narudzbenica.xml 12.11.2008. Fakultet organizacionih nauka Jove Ilica 154 nabavka@fon.rs 011/3950800 Jovan Jovanovic Office 1 Superstore YUBC, Bul. Mihajla Pupina 10b yubc@office1.co.yu 011/3131003 Petar Petrovic

9

DVD Verbatim 43522 kom 20 100 Toner za ink-jet 42057 dl 100 5 USB Kingston 4GB 41862 kom 1000 3 Papir za tampa, 80g 42789 ris 250 5

Napominjemo da je koreni element u navedenom XML dokumentu nazvan . Svi drugi elementi koji se nalaze u dokumentu su sadrani unutar . Element predstavlja koreni element DOM stabla. Koreni element sadri tiri vora (deteta) , i . sadri i atribut vor rb="1235". Dete vor sadri tekstualni vor 12.11.2008.

Dete vor sadri svoja dva vora deteta sa po pet vorova dece i jedim atribut vorom uloga. sadri i vor komentar . Dete vor sadri etiri vora deteta sa po pet vorova dece i jedim atribut vorom rbs. VANO! Tekst je uvek sauvan u tekst voru. esta greka u DOM obradi je da kada se doe do odreenog vora oekuje se da sadri tekst. Meutim, ak i najjednostavniji element vor ima tekst unutar sebe. Na primer, u 43522, postoji element vor () i tekst vor unutar njega, koji sadri tekst (43522).10

Slika 1 (iz odeljka Uvod u XML DOM) ilustruje fragment DOM stabla vorova iz prethodno navedenog XML dokumenta.

1.7 XML DOM stablo vorovaStablo vorova prikazuje XML dokument kao skup vorova i njihovih meusobnih veza. Prilikom formiranja stabla vorova, potuju se sledea pravila: U stablu vorova, prvi vor (vor na vrhu) se naziva koren Svaki vor, osim korena, ima tano jedan roditeljski vor vor moe da ima proizvoljan broj dece List je vor koji nema dece Braa su vorovi sa istim roditeljem

Sledea slika ilustruje deo stabla vorova i veza koje postoje izmeu vorova u navedenom XML fajlu: narudzbenica.xmlKoreni element Roditeljski vor Element Prvo dete firstChild Element

Sledei brat (nextSibling) Element Prethodni brat (previousSibling) Element Poslednje dete lastChild

Element

Slika 3 Primer stable vorova I odnosa koji postoje izmeu vorova

Deca liste_artikala - braa meusobno

11

1.8 XML DOM pristup vorovimaKoristei DOM, moe da se pristupi svakom voru u XML dokumentu. Mogue je pronai vor koji elite da obradite na nekoliko naina: Korienjem getElementsByTagName() metode Korienjem svojstva parentNode (roditeljski vor), firstChild (prvo dete) i lastChild (poslednje dete) element vora

1.8.1

getElementsByTagName()

Metoda getElementsByTagName() moe da pronae bilo koji XML element u celom dokumentu. Ova metoda zanemaruje strukturu dokumenta. Ukoliko je neophodno da se pronau svi elementi u dokumentu, metoda getElementsByTagName() e ih sve i pronai, bez obzira na kojem nivou se element nalazi. Metoda getElementsByTagName() vraa sve elemente (kao nodeList tj. listu vorova) sa navedenim imenom taga koji je predak elementa na kome se nalazite kada se koristi ova metoda. Metoda getElementsByTagName() moe da se koristi nad bilo kojim XML elementom. getElementsByTagName() sintaksa getElementsByTagName("imetaga"); Naredni primer vraa listu vorova (nodeList) svih elemenata u dokumentu: var x=xmlDoc.getElementsByTagName("stavka");

1.8.2

nodeList

Kada se koristi nodeList, obino se lista uva u nekoj varijabli kao na primer: var x=xmlDoc.getElementsByTagName("stavka"); Sada varijabla x sadri listu svih elemenata na strani i moe im se pristupati na osnovu njihovih indeksa.12

Napomena: Indeks zapoinje od 0. Moe se proi kroz celu listu vorova korienjem svojstva length (duina): var x=xmlDoc.getElementsByTagName("stavka"); for (var i=0;i elementa: xmlDoc=loadXMLDoc("narudzbenica.xml"); var x=xmlDoc.getElementsByTagName("stavka"); var noviElement,noviTekst for (i=0;i