Your SlideShare is downloading. ×
  • Like
Document object model
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Document object model

  • 121 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
121
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. SVEUČILIŠTE U ZAGREBU FAKULTET ORGANIZACIJE I INFORMATIKE VAR A ŽD INLuka Rajčević DOM Document Object Model SEMINARSKI RAD Varaždin, 2012.
  • 2. SVEUČILIŠTE U ZAGREBU FAKULTET ORGANIZACIJE I INFORMATIKE VAR A ŽD INLuka RajčevićRedoviti studentBroj indeksa: 38117/09-R.Smje r: Informacijski sustaviPreddiplomski studij DOM – Document Object Model SEMINARSKI RAD Mentor: Prof. Dr. sc. Dragutin Kermek Mag. Inf. Jurica Ševa Varaždin, veljača 2012.
  • 3. Sadržaj1. UVOD ...........................................................................................................................................................................................12. O DOM-U ....................................................................................................................................................................................2 2.1 OPĆENITO O DOM-U ............................................................................................................................................................2 2.2 HTM L DOM .........................................................................................................................................................................3 2.3 XM L DOM ............................................................................................................................................................................73. ZAKLJ UČAK...........................................................................................................................................................................10LITERATURA .............................................................................................................................................................................10 I
  • 4. 1. Uvod„DOM, ili Document Object Model (objektni model dokumenta) je više-platformskoaplikacijsko programsko sučelje ili API za valjane HTML i XML dokumente, neovisno oprogramskom jeziku. DOM definira logičku strukturu dokumenta i način na koji se dokumentupristupa i manipulira s njim.“[What is the Document Object Model?, http://bit.ly/xoJx1i]Uz pomoć DOM-a, programeri mogu stvarati nove dokumente, kretati se kroz njih te dodavati,ažurirati ili brisati sadržaj dokumenta. DOM pruža strukturirani prikaz dokumenta te omogućavapromjenu njegovog sadržaja i vizualnog izgleda uz pomoć nekog od jezika za skriptiranje (npr.Javascript). Ukratko rečeno, svemu što se nalazi na HTML ili XML dokumentu, uz nekeiznimke, može se pristupiti uz pomoć DOM-a.U ovom seminarskom radu ću objasniti što je to Document Object Model, od čega se sastoji,kako se s njim radi i koja mu je svrha. 1
  • 5. 2. O DOM-u2.1 Općenito o DOM-uIako je u uvodu već rečeno nekoliko riječi o DOM-u, vrijedi spomenuti još neke dodatneinformacije koje su vezane uz njega. Dakle, DOM ili Document Object Model je:„ ...sučelje koje nam omogućava da pristupamo (najčešće uz pomoć nekog programskog jezika) imanipuliramo sadržajem web stranice. DOM pruža strukturiran i objektno-orjentiran prikazzasebnih elemenata i sadržaja na stranici koristeći svoje metode za pristupanje i postavljanjesvojstava objektima.“[Introduction to the Document Object Model, http://www.brainjar.com/dhtml/intro/]DOM je standardiziran od W3C i podjeljen je na 3 dijela (razine):  Core DOM  HTML DOM  XML DOMCore DOM je jedna od sekcija DOM-a i ona definira skup objekata i sučelja za pristupanje imanipulaciju dokumenata. Core DOM gleda dokument kao jedan objekt i, jednako kao i HTML iXML DOM, definira metode i svojstva koja se nad tim dokumentom mogu obavljati. Core DOMse ne bazira na određenom tipu dokumenta. On objašnjava metode i svojstva kao i još mnogedruge stvari kao što su upravljanje memorijom, osnovni tipovi podataka i sl. Neovisno odokumentu za koji se oni odnose. U ovom seminaru neću govoriti o Core DOM-u nego ću seviše bazirati na HTML i u manjem obimu na XML DOM. 2
  • 6. 2.2 HTML DOMHTML DOM je programski API za HTML dokumente. To znači da on omogućava programskipristup i manipulaciju sadržaja web stranice ili dokumenta. Uzmimo slijedeći HTML kod kaoprimjer: Slika 2.1: HTML primjerKorijenski ili glavni čvor u ovom primjeru je <html>. Svi ostali čvorovi dokumenta su smješteniunutar <html>. Također, <html> ima dva čvora djeteta. To su <head> i <body>. Svaki od njihtakođer ima svoje čvorove – djecu, pa tako <head> čvor ima <title> a <body> ima <h1> i<p>. HTML DOM ovakav raspored HTML elemenata vidi kao stablastu strukturu. Takvastruktura se još naziva i stablo čvorova (node-tree). U stablu čvorova, čvorovi su međusobnopovezani na hijerarhijski način. Postoji glavni čvor koji je na vrhu, ispod njega se nalaze njegovičvorovi-djeca. Svako njegovo dijete može imati još djece te se na taj način stvara hijerar hija. Naslici 2.2. je prikazana stablasta struktura HTML dokumenta iz slike 2.1. na način kako nju vidiHTML DOM. Slika 2.2: S tablo čvorova 3
  • 7. Neka od pravila stvaranja stabla čvorova su slijedeća:  čvor koji se nalazi na samom vrhu se naziva korijen (korijenski element)  svaki čvor (osim korijenskog) ima točno jednog roditelja  svaki čvor može imati proizvoljan broj djece  list je čvor bez djeceU DOM-u, HTML dokument se sastoji od skupa objekata, tj. čvorova. Kada kažemo da je DOMustvari API (aplikacijsko programsko sučelje) za HTML i XML ustvari mislimo na to da DOM,u suštini, spaja web stranice, odnosno objekte koji se na njima nalaze, sa skriptama iliprogramskim jezicima. Upravo radi toga se DOM najčešće koristi u kombinaciji saJavaScriptom. To znači da je kod napisan u JavaScriptu ali koristi DOM kako bi pristupio webstranici i njenim elementima. Programsko sučelje DOM-a je definirano standardnim svojstvima(properties) i metodama (methods). Neka od DOM svojstava su npr.  x.innerHTML – prikazuje tekstualnu vrijednost varijable x  x.nodeName – daje naziv varijable x  x.nodeValue – daje vrijednost varijable x  x.attributes – daje vrijednosti atributa čvora xA neke od metoda koje se najčešće koriste su:  x.getElementById(id) – dohvaća element sa određenim id-jem  x.getElementsByTagName(name) – dohvaća sve elemente sa određenim tag-omIako je najčešće korišten ukombinaciji s JavaScriptom, DOM je dizajniran na način da budeneovisan o nekom određenom programskom jeziku. U ovom seminarskom radu ću se fokusiratina korištenje DOM-a u kombinaciji s javascriptom, ali moguće su implementacije DOM-a i zamnoge druge programske jezike. 4
  • 8. Kako se koriste DOM svojstva i metode u praksi pokazuju slijedeći primjeri. Slika 2.1: Kombinacija DOM-a i javaS cripta (1) Slika 2.2: Rezultat koda sa slike 3Modificirali smo početni HTML kod (slika 2.1.) i dodali određene funkcionalnosti, npr.paragrafu smo dodali atribut id i nazvali smo ga par. Zatim smo uz pomoć javaScripta i DOMmetode getElementById() pretražili HTML dokument kako bi pronašli onaj element u kodu čijiid odgovara zadanome te njegov sadržaj, uz pomoć svojstva innerHTML, pripisali varijabli txt.Nakon toga smo jednostavno ispisali vrijednost varijable txt na zaslon pomoću metode write. txt=document.getElementById("par").innerHTML; document.write("Tekst koji se nalazi u paragrafu: " + txt);U drugom primjeru se koristi metoda getElementsByTagName() koja dohvaća sve elemente kojiimaju određeni tag. Tako dohvaćeni elementi spremau se u polje, i svakom članu se može 5
  • 9. pristupiti pomoću njegovog rednog broja (0 – n). Naposlijetku, u primjeru se ispisuje sav tekstkoji sadrže dohvaćeni tagovi. Slika 2.3:Kombinacija DOM-a i javaS cripta (2)Postoje četiri <p> taga. Korištenjem metode getElementsByTagName() oni se spremaju uvarijablu txt koja postaje niz od 4 elementa. Prolaskom kroz for petlju se ispisuje tekst sadržanunutar svakog dohvaćenog elementa. Slika 2.4: Rezultat koda sa slike 5. 6
  • 10. 2.3 XML DOMKao što je HTML DOM standardni objektni model i API za HTML dokumente, tako i XMLDOM definira objekte i svojstva svih XML elemenata kao i metode kojima se pristupa istima.Drugim rječima : „XML DOM je standard za pristupanje, mijenjanje, dodavanje ili brisanje XML elemenata.“ [XML DOM introduction, http://bit.ly/b1W8pN]Prema DOM- u, sve što se nalazi u XML dokumentu je čvor. Pravila XML DOM-a su slijedeća:  cijeli XML dokument čini čvor dokument  svaki XML element je čvor element  tekst unutar XML elementa je tekstni čvor  svaki atribut je atributni čvor Na slijedećem primjeru se mogu vidjeti XML elementi i njihovi atributi: Slika 2.5: XML kodKorijenski čvor u XML- u sa slike 2.7. je <bookstore>. Svi ostali čvorovi se nalaze unutar njega.Korijenski čvor sadrži 2 <book> čvora od kojih svaki sadrži još neke čvorove. Tako npr. prvi 7
  • 11. <book> čvor sadrži čvorove <title>, <author>, <year> <i> i <price>. Svaki od tih čvorova sanajniže razine sadrži tekstualni čvor.XML datoteke se , kao i HTML, mogu prikazati uz pomoć DOM stabla čvorova. Za prethodniprimjer bi stablo izgledalo otprilike ovako (slika 2.8): Slika 2.6: XML stablo čvorova, preuzeto sa http://www.w3schools.com/dom/dom_nodetree.aspXML DOM, isto kao i HTML sadrži određene metode kojima pristupa elementima XMLdokumenta. Te metode su prilično slične metodama HTML DOM-a, a neke od njih su:  getElementsByTagName(name) – pronalazi sve elemente sa određenim tag-om  appendChild(node) – ubacuje dijete čvoru x  removeChild(node) – uklanja dijete od čvora xTakođer, postoje i svojstva (properties) elemenata XML DOM-a koji olakšavaju modifikaciju iupravljanje sadržajem. Neka od nejčešće korištenih svojstava su:  x.nodeName – daje ime čvora x  x.nodeValue – daje vrijednost čvora x  x.parentNode – daje roditeljski čvor od x  x.attributes – daje popis atributa (atributnih čvorova) koje x sadržiKorištenje XML doma ima velikih sličnosti sa HTML DOM-om, npr. txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; 8
  • 12. nam daje vrijednost sadržanu u prvom <title> tagu XML dokumenta koisteći standardnu DOMmetodu getElementsByTagName() kao i neka od DOM svojstava: childNodes i nodeValueJoš jedna bitna stvar koja se mora spomenuti kod XML-a je parsiranje. XML dokumenti znajubiti jako nepregledni pa ih je potrebno pretvoriti u oblik koji će biti lakše razumjeti i pročitati. Tutakođer uskače DOM. Parsiranje se odvija na način da XML parser čita XML dokumet i pretvaraga u XML DOM objekt. Nakon što je stvoren XML DOM objekt sa svim svojim čvorovima,koriste se metode (funkcije) kojima se prolazi kroz XML stabla, dodaju se čvorovi, brišu se ili sepristupa već postojećima. Većina browsera ima već ugrađen XML parser za čitanje imanipulaciju XML-om. 9
  • 13. 3. ZaključakDOM (Document Object Model) i njegova višeplatformnost i neovisnost o programskom jezikuuvelike utječu na razvoj weba. DOM je uvelike zaslužan za stvaranje dinamičkog weba (činisponu između statičkog HTML-a i nekog programskog jezika, npr. JavaScripta). Uz pomoćDOM-a, programeri mogu stvarati nove dokumente, kretati se kroz njih te dodavati, ažurirati ilibrisati njihov sadržaj. U svakom slučaju, DOM je prilično olakšao posao web programerima i usvakoj novoj verziji donosi i druge funkcionalnosti. Literatura 10
  • 14. 1. HTML DOM introduction, dostupno 29.02. 2012. na http://www.w3schools.com/htmldom/dom_intro.asp2. XML DOM tutorial, dostupno 29.02. 2012. na http://www.w3schools.com/dom/default.asp3. Introduction to the Document Object Model, dostupno 29.02.2012. na http://www.brainjar.com/dhtml/intro/4. What is the Document Object Model?, dostupno 29.02.2012. na http://www.w3.org/TR/DOM-Level-2-Core/introduction.html5. About the Document Object Model, dostupno 29.02. 2012. na https://developer.mozilla.org/en/DOM/About_the_Document_Object_Model 11