DOM Document Object Modelul obiectelor documentului Informaie general
DOM Document Object Modelul obiectelor documentului
Informaţie generală n n DOM este W 3 C (World Wide Web Consortium) standard. DOM defineşte un standard general pentru procesarea documentelor HTML şi element. ML: "The W 3 C Document Object Model (DOM) is a platform and languageneutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. " n Eelementistă trei niveluri (părţi) DOM : ¨ ¨ ¨ n Core DOM – un model standard pentru orice document structurat; XML DOM – un model standard pentru documente XML; HTML DOM – un model standard pentru documente HTML; DOM defineşte obiecte (objects) şi proprietăţile (properties) pentru toate elementele documentului şi metodele ( methods ) pentru accesarea lor.
Informaţie generală n n HTML DOM este W 3 C (World Wide Web Consortium) standard; HTML DOM defineşte un standard general pentru procesarea documentelor HTML de orice program; HTML DOM este independent de platformă şi de limbaj de programare; DOM defineşte obiecte (objects) şi proprietăţile (properties) pentru toate elementele documentelor HTML şi metodele (methods) pentru procesarea lor.
DOM defineşte HTML document ca un arbore (tree)
Noduri DOM (DOM Nodes) n În DOM tot ce este în documentul HTML este nod. Aceasta înseamnă: n Documentul întreg este document node n Fiecare element HTML este element node n Teelementte in elementele HTML sunt teelementt nodes n Fiecare atribut HTML este attribute node n Comentarii sunt comment nodes P. S. Textul în elementele HTML nu este valoarea lor dar nodul următor în arbore
Relaţii între noduri DOM n n n n Noduri in arbore au o relaţie ierarhică. Termenii părinte (parent), copil (child), şi fraţi (sibling) sunt folosite pentru descrierea relaţiilor. Noduri-părinţi conţin noduri-copii. Copiii aceluiaşi părinte sunt numiţi fraţi. Nodul de vîrf al arborelui (top node) este numit rădăcină (root) Fiecare nod în afară de cel de vîrf are numai un părinte Un nod poate să aibă oricare număr de copii Dacă un nod nu are copii el este numit frunză (leaf)
Relaţii între noduri DOM <html> <head> <title>DOM Tutorial</title> </head> <body> <h 1> Document despre DOM </h 1> <p>Hai să studiem DOM!</p> </body> </html> <html> este nodul rădăcină şi are doi copii: <head> şi <body> care sunt fraţi Nodul <h 1> are un copil – Textul “Document despre DOM”
Relaţii între noduri DOM <html> <head> <title>DOM Tutorial</title> </head> <body> <h 1> Document despre DOM </h 1> <p>Hai să studiem DOM!</p> <p>Hai să studiem elementele DOM!</p> <p>Hai să studiem procesarea DOM!</p> <p>Hai să studiem elementele de utilizare. DOM în Java. Script!</p> </body> </html> Noţiuni de First Child şi Last Child
Utilizarea DOM în Java. Script n n n Nodurile documentului pot fi accesate şi procesate de limbajul Java. Script; Procesarea include: Accesarea elementelor, valorilor şi proprietăţilor lor; Manipularea cu elementele, valorile şi proprietăţile lor, de exemplu, adăugarea, schimbarea sau ştergerea; Totul sus menţionat se efectuiază prin proprietăţi (PROPERTIES) şi metode (METHODS) ale limbajului de programare.
HTML DOM Properties element. inner. HTML – Textul din elementul dat n element. node. Name - numele elementului dat n element. node. Value - valoarea elementului dat n element. parent. Node - părintele elementului dat n element. child. Nodes – copilul elementului dat n element. attributes - atributele elementului dat n
HTML DOM Methods n n element. get. Element. By. Id(id) - obţine elementul cu id dat element. get. Elements. By. Tag. Name(name) - obţine toate elementele cu tag-ul cu numele dat element. append. Child(node) – adaugă un element-copil în elementul dat element. remove. Child(node) - şterge un elementcopil în elementul dat
inner. HTML Property <html> <body> <p id="intro">Studiem DOM!</p> <script type="text/javascript"> txt=document. get. Element. By. Id("intro"). inner. HTML; alert("Textul din paragraf cu id intro: " + txt); </script> </body> </html> inner. HTML nu se află în W 3 C DOM specification dar este acceptată în majoritatea browserilor.
Acelaşi rezultat cu altă metodă <html> <body> <p id="intro"> Studiem DOM!</p> <script type="text/javascript"> txt=document. get. Element. By. Id("intro"). child. Nodes[0]. node. Value; document. write("<p> Textul din paragraf cu id intro: " + txt + "</p>"); </script> </body> </html> Document este nodul; get. Element. By. Id este metoda iar child. Nodes[0] şi node. Value sunt proprietăţie
Accesarea nodurilor n n n Prin get. Element. By. Id() method Prin get. Elements. By. Tag. Name() method Prin scrierea calei de la nodul-rădăcină la nodul necesar get. Elements. By. Tag. Name() întoarce lista numerotată a tagurilor cu numele dat din documentul dat
Accesarea nodurilor <html> <body> <h 1> Document despre DOM </h 1> <p>Hai să studiem DOM!</p> <p>Hai să studiem elementele DOM!</p> <p>Hai să studiem procesarea DOM!</p> <p>Hai să studiem elementele de utilizare DOM în Java. Script!</p> <script type="text/javascript"> x=document. get. Elements. By. Tag. Name("p"); alert("Text din paragraful 3: " + x[2]. child. Nodes[0]. node. Value); </script> </body> </html> get. Elements. By. Tag. Name(p) întoarce lista numerotată a tagurilor cu numele p din documentul dat
Accesarea nodurilor <html> <body> <h 1> Document despre DOM </h 1> <p>Hai să studiem DOM!</p> <p>Hai să studiem elementele DOM!</p> <p>Hai să studiem procesarea DOM!</p> <p>Hai să studiem elementele de utilizare DOM în Java. Script!</p> <script type="text/javascript"> x=document. get. Elements. By. Tag. Name("p"); for (i=0; i<x. length; i++) { j=i+1; alert("Text din paragraful “+j+”: " + x[i]. child. Nodes[0]. node. Value); } </script> </body> </html>
Accesarea nodurilor <html> <body id="main"> <h 1> Document despre DOM </h 1> <p>Hai să studiem DOM!</p> <p>Hai să studiem elementele DOM!</p> <p>Hai să studiem procesarea DOM!</p> <p>Hai să studiem elementele de utilizare DOM în Java. Script!</p> <script type="text/javascript"> x=document. get. Element. By. Id("main"); alert(x. first. Child. inner. HTML); alert(x. last. Child. inner. HTML); </script> </body> </html>
Accesarea nodurilor <html> <body id="main"> <h 1> Document despre DOM </h 1> <p>Hai să studiem DOM!</p> <p>Hai să studiem elementele DOM!</p> <p>Hai să studiem procesarea DOM!</p> <p>Hai să studiem elementele de utilizare DOM în Java. Script!</p> <script type="text/javascript"> alert(document. Element. inner. HTML); alert(document. body. inner. HTML); </script> </body> </html> document. Element – acces la nodul de rădăcină (root node) document. body – acces la tot ce este în <body> tag
Proprietăţile nodurilor Node Properties În HTML DOM fiecare nod este un obiect (object). Obiectele au metode şi proprietăţicare pot fi accesate şi manipulate cu Java. Script. Cele mai importante trei proprietăţi ale nodurilor sunt: n node. Name n node. Value n node. Type
Proprietatea node. Name n n n Proprietatea node. Name specifică numele nodului. node. Name este read-only node. Name elementului-nodului este numele tag-ului node. Name atributului nodului este numele atributului node. Name nodului-text este #text node. Name nodului documentului este #document Notă: node. Name conţine numele tag-ului scris cu majuscule.
Proprietatea node. Name <html> <body> <p id="intro"><b>Textul valoare!</b></p> <script type="text/javascript"> x=document. get. Element. By. Id("intro"); alert(x. first. Child. node. Name); </script> </body> </html>
Proprietatea node. Value n n Proprietatea node. Value specifică valoarea nodului. node. Value pentru elemente-node este undefined node. Value pentru node-text este textul dat node. Value pentru atribute este valoarea lor
Proprietatea node. Value <html> <body> <p id="intro"><b>Textul valoare!</b></p> <script type="text/javascript"> x=document. get. Element. By. Id("intro"); alert(x. first. Child. node. Value); </script> </body> </html>
Proprietatea node. Value <html> <body> <p id="intro"><b>Textul valoare!</b></p> <script type="text/javascript"> x=document. get. Element. By. Id("intro"); alert(x. first. Child. node. Value); </script> </body> </html>
Proprietatea node. Type întoarce tipul nodului n node. Type este read only. n Cele mai importante tipuri de noduri sunt: Tipul Elementului Tipul Nodului Element 1 Attribute 2 Text 3 Comment 8 Document 9 n
Scimbările elementelor HTML <html> <body> <p id="intro"><b>Textul valoare!</b></p> <script type="text/javascript"> document. get. Element. By. Id("intro"). first. Child. node. Value = “Alt text”; </script> </body> </html>
Scimbările elementelor HTML <html> <body> <p id="p 1">Textul iniţial!</p> <script type="text/javascript"> document. get. Element. By. Id("p 1"). inner. HTML=“Alt text!"; </script> </body> </html>
Scimbările elementelor HTML <html> <body> <p id="p 1">Textul iniţial!</p> <input type="button" onclick=" document. get. Element. By. Id("p 1"). inner. HTML=“Alt text!"; “ value=“Schimbă textul" /> </body> </html>
Scimbările elementelor HTML <html> <head> <script type="text/javascript"> function Change. Style() { document. get. Element. By. Id("p 1"). style. color="blue"; document. get. Element. By. Id("p 1"). style. font. Family="Arial"; } </script> </head> <body> <p id="p 1">Hello world!</p> <input type="button" onclick="Change. Style()" value="Change style" /> </body> </html>
Evenimente n n n n A mouse click A web page or an image loading (onload and on. Unload) Mousing over a hot spot on the web page Selecting an input box in an HTML form (on. Focus, on. Blur and on. Change) Submitting an HTML form (on. Click) A keystroke (on. Key. Down, on. Keypress, on. Keyup) Etc.
XML DOM n n XML DOM este un model standard a obiectelor XML DOM este interfaţa standardă de programare XML DOM este independentă de platformă şi limbaj XML DOM este standardul W 3 C XML DOM defineşte obiecte (objects) şi proprietăţi (properties) elementelor XML şi metodele (methods) sau interfaţa (interface) pentru accesarea lor. În alte cuvinte: XML DOM este un standard pentru obţinerea, schimbarea sau ştergerea elementelor XML.
XML DOM organizează elementele documentului într-o structură arborescentă
<? xml version="1. 0" encoding="ISO-8859 -1" ? > - <bookstore> - <book category="cooking"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30. 00</price> </book> - <book category="children"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29. 99</price> </book>. . . </bookstore>
<html> Prelucrarea XML <script type="text/javascript"> function Activarea(){ utilizînd DOM if (window. XMLHttp. Request) { în Java. Script xhttp=new XMLHttp. Request(); } else // for IE 5/6 { xhttp=new Active. XObject("Microsoft. XMLHTTP"); } xhttp. open("GET", "books. xml", false); xhttp. send(); xml. Doc=xhttp. response. XML; alert("XML document loaded into an XML DOM Object. "); } </script> <body> <input type="button" onclick="Activarea()" value="activeaza" /> </body> </html>
Prelucrarea XML în Java. Script Proprietăţile elementelor XML DOM: element. node. Name n element. node. Value n element. parent. Node n element. child. Nodes n element. attributes n
Prelucrarea XML în Java. Script Metodele XML DOM: element. get. Elements. By. Tag. Name(name) n element. append. Child(node) n element. remove. Child(node) n
Accesarea elementelor XML în Java. Script Trei variante posibile: n get. Elements. By. Tag. Name() method n Ciclul (traverarea) prin nodurile arborelui n Navigarea prin nodurile arborelui utilizînd relaţii între noduri
Prelucrarea XML în Java. Script Exemple: txt=xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]. node. Value get. Elements. By. Tag. Name şi child. Nodes întoarce un array din toate elementele cu numele dat
Proprietatea. attributes x=xml. Doc. get. Elements. By. Tag. Name("book") [0]. attributes; alert(x. get. Named. Item("category"). node. Value + " " + x. length);
Proprietatea. attributes x=xml. Doc. get. Elements. By. Tag. Name("book") [0]. attributes; alert(x. get. Named. Item("category"). node. Value + " " + x. length); Rezultat: cooking 1
Prelucrarea XML în Java. Script Exemple: txt=xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]. node. Value Va fi: Everyday Italian
Prelucrarea XML în Java. Script Exemple: x=xml. Doc. get. Elements. By. Tag. Name("author"); alert(x[2]. child. Nodes[0]. node. Value);
Prelucrarea XML în Java. Script Exemple: x=xml. Doc. get. Elements. By. Tag. Name("author"); document. write(x[2]. child. Nodes[0]. node. Value); Va fi: J K. Rowling
Prelucrarea XML în Java. Script Exemple: alert(xml. Doc. document. Element. node. Name); alert(xml. Doc. document. Element. node. Type); Va fi: bookstore 1
Prelucrarea XML în Java. Script Exemple: x=xml. Doc. get. Elements. By. Tag. Name("book")[0]. child. Nodes; y=xml. Doc. get. Elements. By. Tag. Name("book")[0]. first. Child; for (i=0; i<x. length; i++) { if (y. node. Type==1) {//Process only element nodes (type 1) document. write(y. node. Name + " "); } y=y. next. Sibling; }
Prelucrarea XML în Java. Script Exemple: x=xml. Doc. get. Elements. By. Tag. Name("book")[0]. child. Nodes; y=xml. Doc. get. Elements. By. Tag. Name("book")[0]. first. Child; for (i=0; i<x. length; i++) { if (y. node. Type==1) {//Process only element nodes (type 1) document. write(y. node. Name + " "); } y=y. next. Sibling; } Va fi: title author year price
Proprietăţile nodurilor Proprietatea document. Element documentului XML este nodul radacina (root node). n Proprietatea node. Name este numele nodului. n Proprietatea node. Type este tipul nodului. n
Exemplu x=xml. Doc. document. Element. child. Nodes; for (i=0; i<x. length; i++) { if (x[i]. node. Type==1) {//Process only element nodes (type 1) alert(x[i]. node. Name); } }
Proprietatea node. Name n n n Proprietatea node. Name specifică numele nodului. node. Name este read-only, nu poate fi schimbat node. Name unui element-nod este numele tag-ului node. Name unui atribut-nod este numele atributului node. Name nodului-text este #text node. Name documentului este #document
Proprietatea node. Value n n n Proprietatea node. Value specifică valoarea nodului. node. Value unui element-nod nu este definit (undefined) node. Value unui atribut-nod este valoarea atributului node. Value nodului-text este textul dat node. Value poate fi schimbată
Proprietatea node. Type întoarce tipul nodului n node. Type este read only. n Cele mai importante tipuri de noduri sunt: Tipul Elementului Tipul Nodului Element 1 Attribute 2 Text 3 Comment 8 Document 9 n
Exemplu x=xml. Doc. get. Elements. By. Tag. Name("book")[0]. child. Nodes; y=xml. Doc. get. Elements. By. Tag. Name("book")[0]. first. Child; for (i=0; i<x. length; i++) { if (y. node. Type==1) {//Process only element nodes (type 1) alert(y. node. Name + " "+y. node. Value + " "+y. node. Type ); } y=y. next. Sibling; }
Exemplu x=xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]; alert(x. nodename+" "+x. node. Value+" "+ x. node. Type);
Exemplu x=xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]; txt=x. node. Value; alert(txt); x=xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]; x. node. Value="Easy Cooking"; x=xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]; txt=x. node. Value; alert(txt);
Exemplu x=xml. Doc. get. Elements. By. Tag. Name("book")[0]. attributes; alert(x. get. Named. Item("category"). node. Value+“ " + x. length);
Exemplu x=xml. Doc. get. Elements. By. Tag. Name("book"); for (i=0; i<x. length; i++) { y=x[i]. child. Nodes; document. write("<p>"); for (j=0; j<y. length; j++) { document. write(y[j]. node. Name); document. write(": "); document. write(y[j]. child. Nodes[0]. node. Value); document. write(" "); } document. write("</p>"); }
Exemplu x=xml. Doc. get. Elements. By. Tag. Name('book'); alert(x[0]. get. Attribute("category")); x[0]. set. Attribute("category", "food"); alert(x[0]. get. Attribute("category"));
Exemplu x=xml. Doc. get. Elements. By. Tag. Name("book")[0]; y=x. get. Attribute. Node("category"); alert(y. node. Value); y. node. Value="food"; alert(y. node. Value);
Exemplu: remove. Child alert("Number of book nodes: " + xml. Doc. get. Elements. By. Tag. Name('book'). length); y=xml. Doc. get. Elements. By. Tag. Name("book")[0]; xml. Doc. document. Element. remove. Child(y); alert("Number of book nodes after remove. Child(): " + xml. Doc. get. Elements. By. Tag. Name('book'). length);
Exemplu: node. Value x=xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]; alert("Name: " + x. node. Name + " Value: " + x. node. Value); x. node. Value=""; alert("Name: " + x. node. Name + " Value: " + x. node. Value);
Exemplu: node. Value x=xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]; alert("Name: " + x. parent. Node. node. Name + " Value: " + x. node. Value); x. node. Value=""; alert("Name: " + x. parent. Node. node. Name + " Value: " + x. node. Value);
Rezultate 1 caz: Name: #text Value: Everyday Italian Name: #text Value: 2 caz: Name: Title Value: Everyday Italian Name: Title Value:
Remove current node x=xml. Doc. get. Elements. By. Tag. Name("book")[0]; x. parent. Node. remove. Child(x);
Remove attributes x=xml. Doc. get. Elements. By. Tag. Name('book'); for (i=0; i<x. length; i++) { while (x[i]. attributes. length>0) { attnode=x[i]. attributes[0]; old_att=x[i]. remove. Attribute. Node(attnode); document. write("Removed: " + old_att. node. Name) document. write(": " + old_att. node. Value) document. write(" ") } document. write("Alt tag ") }
Rezultat Removed: category: cooking Alt tag Removed: category: children Alt tag Removed: category: web Removed: cover: paperback Alt tag
Crearea şi înlocuirea nodurilor x=xml. Doc. document. Element; //crearea elementului book, elementului title şi text node new. Node=xml. Doc. create. Element("book"); new. Title=xml. Doc. create. Element("title"); new. Text=xml. Doc. create. Text. Node("A Notebook"); //adăugarea nodului-text la nodul title, new. Title. append. Child(new. Text); // adăugarea nodului title la nodul book new. Node. append. Child(new. Title); y=xml. Doc. get. Elements. By. Tag. Name("book")[0] Înlocuireaprimului nod book cu un nod nou x. replace. Child(new. Node, y); z=xml. Doc. get. Elements. By. Tag. Name("title"); for (i=0; i<z. length; i++) { document. write(z[i]. child. Nodes[0]. node. Value); document. write(" "); }
înlocuirea textului x=xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]; document. write(x. node. Value); x. replace. Data(0, 8, "Easy"); document. write(" "); document. write(x. node. Value);
Dublarea nodurilor old. Node=xml. Doc. get. Elements. By. Tag. Name('book')[0]; new. Node=old. Node. clone. Node(true); xml. Doc. document. Element. append. Child(new. Node); //Lista cărţilor formată y=xml. Doc. get. Elements. By. Tag. Name("title"); for (i=0; i<y. length; i++) { document. write(y[i]. child. Nodes[0]. node. Value); document. write(" "); }
Adăugarea atributelor x=xml. Doc. get. Elements. By. Tag. Name("title"); x[0]. set. Attribute("edition", "first"); document. write("Edition: "); document. write(x[0]. get. Attribute("edition"));
- Slides: 70