Curs 05 DOM - Slides

11

55Document Object

Model (DOM): obiecte şi colecţii

2

OBIECTIVECum să utilizăm limbajul JavaScript cu modelul DOM de la consorţiul W3C pentru a crea pagini web dinamice.Concepte: noduri DOM şi arbori DOM.Cum să traversăm, să edităm şi sămodificăm elementele dintr-un document XHTML.Cum să modificăm dinamic stiluri CSS.Să creăm animaţie JavaScript.

3

5.1 Introducere5.2 Modelarea unui Document: Noduri şi Arbori

DOM 5.3 Traversarea şi Modificarea unui Arbore

DOM5.4 Colecţii DOM 5.5 Stiluri Dinamice5.6 Sumarul Obiectelor şi Colecţiilor DOM5.7 Împachetare (Wrap-Up)5.8 Resurse Web

4

5.1 Introducere

Document Object Model – DOM permite accesul la toate elementeledintr-o pagină web. Utilizând JavaScript, se pot crea,

modifica şi şterge elemente din pagină în mod dinamic.

5Observaţii de Inginerie Software

Un element HTML/XHTML indică structura dintr-undocument precum şi modul de ierarhizare a aranjăriiconţinutului. Un element HTML satisface cerinţele unei DTD (Document Type Definition).Elementele de tip container se construiesc cu:

un tag de start (<tag>) care marchează începutul unuielement, şi poate încorpora:

orice număr de atribute (precum şi valorile asociateacestora);

ceva conţinut (text, alte elemente); un tag de end, în care numele elementului este precedat de forward slash: </tag>.

6Observaţii de Inginerie Software(continuare)

Elementele au proprietăţi: atât atribute cât şi conţinut,aşa cum s-a specificat în acord cu DTD-ul potrivit. Elementele pot reprezenta titluri, paragrafe, link-uri

hypertext, liste, media încorporată, precum şi ovarietate de alte structuri.Cu DOM, elementele XHTML pot fi tratate ca obiecte,

multe atribute de elemente XHTML pot fi tratate caproprietăţi ale acestor obiecte. Apoi cu JavaScript, obiectele pot fi scenarizate (prin

intermediul atributelor lor id) pentru realizareaefectelor dinamice.

7

5.2 Modelarea unui Document: DOM Noduri şi Arbori

DOM este un model obiectual standard pentru reprezentareadocumentelor HTML, XML, XHTML precum şi un API (Application Programming Interface) pentru interogarea, traversarea şi manipularea acestordocumente.Structura obiectelor DOM este ierarhică: arbore cu noduri (elemente XHTML)

http://upload.wikimedia.org/wikipedia/commons/e/e4/JKDOM.SVG

8

5.2 Modelarea unui Document: DOM Noduri şi Arbori (continuare)

Metoda getElementByIdReturnează obiectele numite noduri DOMFiecare element dintr-o pagină XHTML este modelată in browserul web printr-un nod DOM

Nodurile dintr-un document aranjează arborele DOM al paginii, caredescrie relaţiile dintre elementeNodurile sunt legate la fiecare altele prin relaţia copil-părinteUn nod poate avea copii multipli, dar numai un părinteNodurile cu acelaşi nod părinte sunt referite ca şi noduri fraţiInspector DOM din Firefox şi Toolbar Developer Web din IE ne permit să vedem o reprezentare vizuală a unui arbore DOM al unui document şi informaţii despre fiecare nod în parteNodul document într-un arbore DOM este numit nod rădăcină, deoarece acesta nu are un nod părinte

9Fig. 5.1 | Cum arată sursaarborelui DOM al unui document.

1 <?xml version = "1.0" encoding = "utf-8"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4 5 

6 

7 <html xmlns = "http://www.w3.org/1999/xhtml">

8 <head>

9 <title>DOM Tree Demonstration</title>

10 </head> 11 <body> 12 <h1>An XHTML Page</h1> 13 <p>This page contains some basic XHTML elements. We use the Firefox 14 DOM Inspector and the IE Developer Toolbar to view the DOM tree 15 of the document, which contains a DOM node for every element in 16 the document.</p> 17 <p>Here's a list:</p> 18 <ul> 19 <li>One</li> 20 <li>Two</li> 21 <li>Three</li> 22 </ul> 23 </body> 24 </html>

element HTML

element head

Element titlubody element

element h1

element p

element pelement ul

element lielement lielement li

10

Fig. 5.1 | Cum prezintă browserul arborele DOM al unui document.

11

Fig. 5.1 | Cum arată Inspectorul DOM arborele unui document.

nodurile HEADşi BODY suntfraţi

nodul BODYeste părintelenodului H1

12

Fig. 5.1 | Cum arată Toolbar Developer Web IE arborele unui document.

13

5.3 Traverarea şi Modificarea unui arboreDOM

• Proprietatea className a unui nod DOM ne permite să modeificăm atributul classal elementului din documente XHTML

• Proprietatea id a unui nod DOM controlează un atribut id a unui element din documente XHTML

14

Traverarea şi Modificarea unui arboreDOM (Continuare)

• metoda obiectul document createElement– Crează un nod nou DOM, taking the tag name as an argument. Does not insert the element on the page.

• metoda obiectul document createTextNode– Crează un nod DOM care poate conţine numai text. Fiind dat un argument string, createTextNode

inserează string într-un nod text.

• metoda appendChild– Apelează un nod părinte pentru a insera un copil nod (trecut ca argument) după orice copil existent

• proprietatea parentNode a unui nod DOM conţine părintele nodului• metoda insertBefore

– Apelează un părinte cu un nou copil şi un copil existent ca argument. Noul copil este inserat ca un copil al părintelui copilului existent imediat anterior.

• metoda replaceChild– Apelează un părinte, luând un nou copil şi un copil existent ca argument. Metoda inserează noul copil în

lista de copii în locul copilului existent.

• metoda removeChild– Apelează un părinte cu un copil ce va fi şters ca şi argument.

15Fig. 5.2 | Funcţionalitatea de bază a DOM (1/14).




4 5 

6 


8 <head>

9 <title>Basic DOM Functionality</title>

10 <style type = "text/css"> 11 h1, h3 { text-align: center; 12 font-family: tahoma, geneva, sans-serif } 13 p { margin-left: 5%; 14 margin-right: 5%; 15 font-family: arial, helvetica, sans-serif } 16 ul { margin-left: 10% } 17 a { text-decoration: none } 18 a:hover { text-decoration: underline } 19 .nav { width: 100%; 20 border-top: 3px dashed blue; 21 padding-top: 10px } 22 .highlighted { background-color: yellow } 23 .submit { width: 120px } 24 </style> 25 <script type = "text/javascript"> 26 <!-- 27 var currentNode; // stores the currently highlighted node 28 var idcount = 0; // used to assign a unique id to new elements 29

Crează o clasă pentruun text highlight (care străluceşte)

1630 // get and highlight an element by its id attribute 31 function byId() 32 { 33 var id = document.getElementById( "gbi" ).value; 34 var target = document.getElementById( id ); 35 36 if ( target ) 37 switchTo( target ); 38 } // end function byId 39 40 // insert a paragraph element before the current element 41 // using the insertBefore method 42 function insert() 43 { 44 var newNode = createNewNode( 45 document.getElementById( "ins" ).value ); 46 currentNode.parentNode.insertBefore( newNode, currentNode ); 47 switchTo( newNode ); 48 } // end function insert 49 50 // append a paragraph node as the child of the current node 51 function appendNode() 52 { 53 var newNode = createNewNode( 54 document.getElementById( "append" ).value ); 55 currentNode.appendChild( newNode ); 56 switchTo( newNode ); 57 } // end function appendNode 58

Se apelează funcţia switchTodacă obiectul poate fi găsit

Se apelează funcţiacreateNewNode pentru a face un nou nod p cu textul din câmpul text de inserat

newNode inserează c şi un copil al nodului părinte, imediatcurrentNode

Se lumineazănewNode cufunction switchTo

Inserează newNode ca şi un copil al noduluicurent

Fig. 5.2 | Funcţionalitatea de bază a DOM (2/14).

1759 // replace the currently selected node with a paragraph node 60 function replaceCurrent() 61 { 62 var newNode = createNewNode( 63 document.getElementById( "replace" ).value ); 64 currentNode.parentNode.replaceChild( newNode, currentNode ); 65 switchTo( newNode ); 66 } // end function replaceCurrent 67 68 // remove the current node 69 function remove() 70 { 71 if ( currentNode.parentNode == document.body ) 72 alert( "Can't remove a top-level element." ); 73 else 74 { 75 var oldNode = currentNode; 76 switchTo( oldNode.parentNode ); 77 currentNode.removeChild( oldNode ); 78 } 79 } // end function remove 80 81 // get and highlight the parent of the current node 82 function parent() 83 { 84 var target = currentNode.parentNode; 85 86 if ( target != document.body ) 87 switchTo( target ); 88 else 89 alert( "No parent." ); 90 } // end function parent

Se obţine părintele unuicurrentNode, apoiinserează newNode în listade copii în loculcurrentNode

Se atenţionează că elementelede nivel top nu sunt şterse

Se şterge oldNode dindocumentul curent

Părintele oldNode se luminează

Se obţine nodul părinte

Ne asigurăm că părintele nu este elementul body


1891 92 // helper function that returns a new paragraph node containing 93 // a unique id and the given text 94 function createNewNode( text ) 95 { 96 var newNode = document.createElement( "p" ); 97 nodeId = "new" + idcount; 98 ++idcount; 99 newNode.id = nodeId; 100 text = "[" + nodeId + "] " + text; 101 newNode.appendChild(document.createTextNode( text ) ); 102 return newNode; 103 } // end function createNewNode 104 105 // helper function that switches to a new currentNode 106 function switchTo( newNode ) 107 { 108 currentNode.className = ""; // remove old highlighting 109 currentNode = newNode; 110 currentNode.className = "highlighted"; // highlight new node 111 document.getElementById( "gbi" ).value = currentNode.id; 112 } // end function switchTo 113 // --> 114 </script> 115 </head> 116 <body onload = "currentNode = document.getElementById( 'bigheading' )"> 117 <h1 id = "bigheading" class = "highlighted"> 118 [bigheading] DHTML Object Model</h1> 119 <h3 id = "smallheading">[smallheading] Element Functionality</h3>

Se crează (dar nu se inserează) un nou nod p

Se crează un id unicpentru noul nod

Se crează un nou nod text cu conţinut de textvariabil, apoi se insereazăacest nod ca un copil alnewNode

Se modifică atributul classpentru strălucirea nodului vechi

Se luminează currentNode

Se atribuie id lui currentNodepentru proprietatea value a câmpului de intrare


19120 <p id = "para1">[para1] The Document Object Model (DOM) allows for 121 quick, dynamic access to all elements in an XHTML document for 122 manipulation with JavaScript.</p> 123 <p id = "para2">[para2] For more information, check out the 124 "JavaScript and the DOM" section of Deitel's 125 <a id = "link" href = "http://www.deitel.com/javascript"> 126 [link] JavaScript Resource Center.</a></p> 127 <p id = "para3">[para3] The buttons below demonstrate:(list)</p> 128 <ul id = "list"> 129 <li id = "item1">[item1] getElementById and parentNode</li> 130 <li id = "item2">[item2] insertBefore and appendChild</li> 131 <li id = "item3">[item3] replaceChild and removeChild </li> 132 </ul> 133 <div id = "nav" class = "nav"> 134 <form onsubmit = "return false" action = ""> 135 <table> 136 <tr> 137 <td><input type = "text" id = "gbi" 138 value = "bigheading" /></td> 139 <td><input type = "submit" value = "Get By id" 140 onclick = "byId()" class = "submit" /></td> 141 </tr><tr> 142 <td><input type = "text" id = "ins" /></td> 143 <td><input type = "submit" value = "Insert Before" 144 onclick = "insert()" class = "submit" /></td> 145 </tr><tr> 146 <td><input type = "text" id = "append" /></td> 147 <td><input type = "submit" value = "Append Child" 148 onclick = "appendNode()" class = "submit" /></td> 149 </tr><tr>


20150 <td><input type = "text" id = "replace" /></td> 151 <td><input type = "submit" value = "Replace Current" 152 onclick = "replaceCurrent()" class = "submit" /></td> 153 </tr><tr><td /> 154 <td><input type = "submit" value = "Remove Current" 155 onclick = "remove()" class = "submit" /></td> 156 </tr><tr><td /> 157 <td><input type = "submit" value = "Get Parent" 158 onclick = "parent()" class = "submit" /></td> 159 </tr> 160 </table> 161 </form> 162 </div> 163 </body> 164 </html>

21


22


23


24


25


2626


27


28


29

5.4 Colecţii DOM

• DOM are colecţii — grupuri de obiecte legate într-o pagină• Colecţiile DOM sunt accesate ca proprietăţi ale obiectelor

DOM aşa ca obiectul document sau ca un nod DOM• Obiectul document are proprietăţi care conţin colecţiaimages, colecţia links, colecţia forms şi colecţia anchors

– Conţine toate elementele de tip corespunzătoare pe pagină

• Pentru a găsi numărul de elemente din colecţie, utilizămproprietatea length a colecţiei

30

5.4 Colecţii DOM (Continuare)

• Articolele dintr-o colecţie se accesează prin paranteze pătrate

• Metoda item a unei colecţii DOM – Elementele specifice dintr-o colecţie se accesează, luând un index ca şi

argument• Metoda namedItem

– acceptă un nume ca şi parametru şi găseşte elementul din colecţie, dacă există, al cărui atribut id sau atribut name este potrivit

• proprietatea href a unui nod link DOM– Se referă la atributul href al link-ului

• Colecţiile permit accesul uşor la toate elementele unuisingur type dintr-o pagină

– Este util pentru strângerea elementelor într-un loc şi pntru aplicarea modificărilor de-a lungul întregii pagini

31Fig. 5.3 | Utilizarea colecţieilinks (1/3).




4 5 

6 


8 <head>

9 <title>Using Links Collection</title>

10 <style type = "text/css"> 11 body { font-family: arial, helvetica, sans-serif } 12 h1 { font-family: tahoma, geneva, sans-serif; 13 text-align: center } 14 p { margin: 5% } 15 p a { color: #aa0000 } 16 .links { font-size: 14px; 17 text-align: justify; 18 margin-left: 10%; 19 margin-right: 10% } 20 .link a { text-decoration: none } 21 .link a:hover { text-decoration: underline } 22 </style> 23 <script type = "text/javascript"> 24 <!-- 25 function processlinks() 26 { 27 var linkslist = document.links; // get the document's links 28 var contents = "Links in this page:\n<br />| "; 29 30 // concatenate each link to contents 31 for ( var i = 0; i < linkslist.length; i++ )

Stochează link-urilecolecţiei documentului în variabila linkslist

Numărul de elementedin colecţie

3232 { 33 var currentLink = linkslist[ i ]; 34 contents += "<span class = 'link'>" + 35 currentLink.innerHTML.link( currentLink.href ) + 36 "</span> | "; 37 } // end for 38 39 document.getElementById( "links" ).innerHTML = contents; 40 } // end function processlinks 41 // --> 42 </script> 43 </head> 44 <body onload = "processlinks()"> 45 <h1>Deitel Resource Centers</h1> 46 <p><a href = "http://www.deitel.com/">Deitel's website</a> contains 47 a rapidly growing 48 <a href = "http://www.deitel.com/ResourceCenters.html">list of 49 Resource Centers</a> on a wide range of topics. Many Resource 50 centers related to topics covered in this book, 51 <a href = "http://www.deitel.com/iw3htp4">Internet and World Wide 52 Web How to Program, 4th Edition</a>. We have Resouce Centers on 53 <a href = "http://www.deitel.com/Web2.0">Web 2.0</a>, 54 <a href = "http://www.deitel.com/Firefox">Firefox</a> and 55 <a href = "http://www.deitel.com/IE7">Internet Explorer 7</a>, 56 <a href = "http://www.deitel.com/XHTML">XHTML</a>, and 57 <a href = "http://www.deitel.com/JavaScript">JavaScript</a>. 58 Watch the list of Deitel Resource Centers for related new 59 Resource Centers.</p> 60 <div id = "links" class = "links"></div> 61 </body> 62 </html>

Stochează link-ul curent în currentLink

Utilizează metoda link pentru a crea un element ancoră cuproprietatea text şiatribut href

Pune toate link-urile într-olocaţie prin inserarea acestoraintr-un element div gol

Link-uile documentului

Fig. 5.3 | Utilizareacolecţiei links(2/3).

33

Fig. 5.3 | Utilizarea colecţiei links (3/3).

Fig. 5.3 | Utilizareacolecţiei links (1/3).

34

5.5 Stiluri dinamice

• un stil de element poate fi modificat în mod dinamic– E.g., în răspunsul pentru evenimente utilizator– Poate crea multe efecte, inclusiv efecte de mouse over, meniuri interactive, şi animaţie

• proprietatea body a unui obiect document– Se referă la elementul body din pagina XHTML

• proprietatea style– poate accesa o proprietate CSS de format node.style.styleproperty.

• proprietate CSS cu o linioară (-), cum ar fi background-color, este referită ca şi backgroundColor din JavaScript

– Convenţia pentru cele mai multe proprietăţi CSS este folosirea primei litere din cuvânt ca literă mare iar cuvintele legate

35Fig. 5.4 | StiluriDinamice (1/2).




4 5 

6 


8 <head>

9 <title>Dynamic Styles</title>

10 <script type = "text/javascript"> 11  19 </script> 20 </head> 21 <body id = "body" onload = "start()"> 22 <p>Welcome to our website!</p> 23 </body> 24 </html>

Promptează utilizatorul pentru o culoare de background

Setează proprietatea CSS background-color la culoarea utilizatorului

36

Fig. 5.4 | Stiluri Dinamice (2/2).

37

5.5 Stiluri dinamice (Continuare)

• Metoda setInterval a obiectului window– execută repetat o instrucţiune pe un anume interval– are doi parametrii

• O instrucţiune ce se execută în mod repetat• Un intreg care specifică modul frecvenţei de execuţie, în milisecunde

– Returns a unique identifier to keep track of that particular interval.

• Metoda clearInterval a obiectului window– Oprşte apelarea repetitivă a metodei setInterval– Trece la identificatorul de interval clearInterval pe care la

returnat setInterval

38Fig. 5.5 | Stiluridinamiceutilizate pentruanimaţie (1/7).




4 5 

6 


8 <head>

9 <title>Deitel Book Cover Viewer</title>

10 <style type = "text/css"> 11 .thumbs { width: 192px; 12 height: 370px; 13 padding: 5px; 14 float: left } 15 .mainimg { width: 289px; 16 padding: 5px; 17 float: left } 18 .imgCover { height: 373px } 19 img { border: 1px solid black } 20 </style> 21 <script type = "text/javascript"> 22 <!-- 23 var interval = null; // keeps track of the interval 24 var speed = 6; // determines the speed of the animation 25 var count = 0; // size of the image during the animation 26 27 // called repeatedly to animate the book cover 28 function run() 29 { 30 count += speed;

3931 32 // stop the animation when the image is large enough 33 if ( count >= 375 ) 34 { 35 window.clearInterval( interval ); 36 interval = null; 37 } // end if 38 39 var bigImage = document.getElementById( "imgCover" ); 40 bigImage.style.width = .7656 * count + "px"; 41 bigImage.style.height = count + "px"; 42 } // end function run 43 44 // inserts the proper image into the main image area and 45 // begins the animation 46 function display( imgfile ) 47 { 48 if ( interval ) 49 return; 50 51 var bigImage = document.getElementById( "imgCover" ); 52 var newNode = document.createElement( "img" ); 53 newNode.id = "imgCover"; 54 newNode.src = "fullsize/" + imgfile; 55 newNode.alt = "Large image"; 56 newNode.className = "imgCover"; 57 newNode.style.width = "0px"; 58 newNode.style.height = "0px"; 59 bigImage.parentNode.replaceChild( newNode, bigImage ); 60 count = 0; // start the image at size 0

Stops the animation when the image has reached its full size

Sets properties for the new img nod

Swaps newNode for the old cover nod

Keeps aspect ratio consistent

Fig. 5.5 | Stiluridinamiceutilizate pentruanimaţie (2/7).

4061 interval = window.setInterval( "run()", 10 ); // animate 62 } // end function display 63 // --> 64 </script> 65 </head> 66 <body> 67 <div id = "mainimg" class = "mainimg"> 68 <img id = "imgCover" src = "fullsize/iw3htp4.jpg" 69 alt = "Full cover image" class = "imgCover" /> 70 </div> 71 <div id = "thumbs" class = "thumbs" > 72 <img src = "thumbs/iw3htp4.jpg" alt = "iw3htp4" 73 onclick = "display( 'iw3htp4.jpg' )" /> 74 <img src = "thumbs/chtp5.jpg" alt = "chtp5" 75 onclick = "display( 'chtp5.jpg' )" /> 76 <img src = "thumbs/cpphtp6.jpg" alt = "cpphtp6" 77 onclick = "display( 'cpphtp6.jpg' )" /> 78 <img src = "thumbs/jhtp7.jpg" alt = "jhtp7" 79 onclick = "display( 'jhtp7.jpg' )" /> 80 <img src = "thumbs/vbhtp3.jpg" alt = "vbhtp3" 81 onclick = "display( 'vbhtp3.jpg' )" /> 82 <img src = "thumbs/vcsharphtp2.jpg" alt = "vcsharphtp2" 83 onclick = "display( 'vcsharphtp2.jpg' )" /> 84 </div> 85 </body> 86 </html>

Executes function run every 10 milliseconds

Fig. 5.5 | Stiluridinamiceutilizate pentruanimaţie (3/7).

41

Fig. 5.5 | Stiluri dinamice utilizate pentru animaţie (4/7).

42


43


44


45

5.6 Sumarul Obiectelor şi Colecţiilor DOM

• Obiectele şi colecţiile în modelul DOM W3C dă flexibilitate în manipularea elementelor unei pagini web.

• Modelul DOM W3C ne permite să accesăm orice element dintr-undocument XHTML. Fiecare element dintr-un document este reprezentat de un obiect separat.

• Pentru referinţe pe W3C obiectul document Model, vezi DOM Level 3 recommendation de la W3C la adresahttp://www.w3.org/TR/DOM-Level-3-Core/. Specificaţiile DOM Level 2 HTML, sunt disponibile lahttp://www.w3.org/TR/DOM-Level-2-HTML/, descrie funcţionalităţi adiţionale DOM specifice pentru HTML, aşa caobiectele pentru diferite tipuri de elemente din XHTML.

• Nu toate browserele web au implementate toate caracteristicileincluse în specificaţia DOM.

46

Fig. 5.6 | Modelul obiectelor de documente de la consorţiul W3C.

47Fig. 5.7 | Obiecte şicolecţii în W3C DOM (1/2).

Obiect sau colecţie

Descriere

Obiecte

window Reprezintă fereastra de browser şi permite accesul la obiectul document conţinut în fereastră. Deasemenea conţine obiectele history şi location.

document Reprezintă documentul XHTML redat într-o fereastră.Obiectul document permite accesul la orice element din documentul XHTML şi permite modificări dinamice pe documentul XHTML. Conţine mai multe colecţii pentru accesarea tuturor elementelor unui tip dat.

body Permite accesul la elemetul body al unui document XHTML.

history Reţine urmele unui vizitator prin browser. Obiectul permite unui programator de script cu abilitate să se mute înainte sau înapoi prin site-urile vizitate.

location Conţine URL-ul documentului redat. Atunci când acest obiect este setat la un nou URL, browserul navighează imediat la noua locaţie.

48Fig. 5.7 | Obiecte şicolecţii în W3C DOM (2/2).

Obiect sau colecţie

Descriere

Colecţii

ancore Colecţiile conţin toate elementele de ancoră <a ….> fără proprietatea href care au atributul name sau id. Elementele apar în colecţie ordinea în care acestea au fost definite în documentul XHTML.

formulare Conţin toate elementele de formular dintr-un document XHTML. Elementele apar în colecţie ordinea în care acestea au fost definite în documentul XHTML.

imagini Conţin toate elementele img dintr-un document XHTML. Elementele aparîn colecţie ordinea în care acestea au fost definite în documentul XHTML.

link-uri Conţin toate elementele de ancore <a ….> cu proprietatea href dintr-un document XHTML. Elementele apar în colecţie ordinea în care acestea au fost definite în documentul XHTML.

Curs 05 DOM - Slides

Documents

Transcript of Curs 05 DOM - Slides