XML extensible Markup Language 6

Wielkość: px

Rozpocząć pokaz od strony:

Download "XML extensible Markup Language 6"

Mariusz Bartosz Sowiński
7 lat temu
Przeglądów:

1 XML extensible Markup Language 6

2 XML DOM XML DOM zawiera metody (funkcje) pozwalające przeglądać drzewo XML: pobierać, wstawiać oraz usuwać jego węzły. Aby móc manipulować dokumentem XML musi on być załadowany do obiektu XML DOM. Parser XML czyta dokument XML i przekształca go w obiekt XML DOM, który może być wykorzystywany z użyciem JavaScript. Większość przeglądarek posiada wbudowany parser XML.

3 Obiekt XML DOM Przykład: if(window.xmlhttprequest) { xhttp=new XMLHttpRequest(); else // IE 5/6 { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); xhttp.open("get","books.xml",false); xhttp.send(); xmldoc=xhttp.responsexml;

4 Obiekt XML DOM Przykład: if (window.domparser) { parser=new DOMParser(); xmldoc=parser.parsefromstring(text,"text/xml"); else // Internet Explorer { xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.loadxml(text);

5 Obiekt XML DOM Przykład: function loadxmldoc(dname) { if (window.xmlhttprequest) { xhttp=new XMLHttpRequest(); else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); xhttp.open("get",dname,false); xhttp.send(); return xhttp.responsexml;

6 Obiekt XML DOM Przykład: function loadxmlstring(txt) { if (window.domparser) { parser=new DOMParser(); xmldoc=parser.parsefromstring(txt,"text/xml"); else // Internet Explorer { xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.loadxml(txt); return xmldoc;

7 XML DOM Wybrane właściwości DOM: x.nodename nazwa elementu x x.nodevalue wartość x x.parentnode rodzic elementu x x.childnodes dzieci elementu x x.attributes - atrybuty x gdzie x to nazwa węzła (element XML).

8 Dokument XML <?xml version="1.0"?> <?xml-stylesheet type="application/xml"?> <people> <person born="1912" died="1954"> <name> <first_name>alan</first_name> <last_name>turing</last_name> </name> <profession>computer scientist</profession> <profession>mathematician</profession> <publications>45</publications> </person> <person born="1918" died="1988"> <name> <first_name>richard</first_name> <last_name>feynman</last_name> </name> <profession>physicist</profession> <publications>120</publications> </person> </people>

9 nodename <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodename); </body> </html>

10 nodevalue <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodevalue); </body> </html>

11 parentnode <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].parentnode.nodename); </body> </html>

12 childnodes <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("person"); document.write(x[0].childnodes[3].nodename); </body> </html>

13 attributes <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodename); </body> </html>

14 attributes <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodevalue); </body> </html>

15 Właściwość nodetype

16 attributes Typ elementu <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodetype); </body> </html> Typ Element 1 Atrybut 2 Tekst 3 Komentarz 8 Document 9

17 attributes Typ elementu <html> <head> <script type="text/javascript" src="loadxmldoc.js"> Komentarz Document 8 9 x=xmldoc.getelementsbytagname("profession"); document.write(x[1].parentnode.parentnode.parentnod e.nodetype); </body> </html> Typ Element 1 Atrybut 2 Tekst 3

18 attributes Typ elementu <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodetype); </body> </html> Typ Element 1 Atrybut 2 Tekst 3 Komentarz 8 Document 9

19 XML DOM Wybrane metody DOM: x.getelementsbytagname(name) element z określoną nazwą x.appendchild(node) do węzła x dodaj dziecko o nazwie node x.removechild(node) usuń dziecko węzła x o nazwie node x.replacechild(new_node,old_node) na miejsce old_node wstaw new_node. gdzie x to nazwa węzła (element XML).

20 appendchild <html> <head> <script type="text/javascript" src="loadxmldoc.js"> new_elem=xmldoc.createelement("hobby"); x=xmldoc.getelementsbytagname("person")[0]; x.appendchild(new_elem); document.write(x.getelementsbytagname("hobby")[0].node Name); </body> </html>

21 romovechild <html> <head> <script type="text/javascript" src="loadxmldoc.js"> y=xmldoc.getelementsbytagname("person")[0]; x=xmldoc.documentelement.removechild(y); document.write("removed node: " + x.nodename); </body> </html>

22 replacechild <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.documentelement; new_node=xmldoc.createelement("hobby"); y=xmldoc.getelementsbytagname("profession")[0] x.replacechild(new_node,y); </body> </html>

23 Przykład <html> <head> <script type="text/javascript" src="loadxmldoc.js"/> x=xmldoc.getelementsbytagname("profession"); for (i=0;i<x.length;i++){ document.write(x[i].childnodes[0].nodevalue); document.write("<br/>"); </body> </html>

24 Przykład <html><head> <script type="text/javascript" src="loadxmldoc.js"/> x=xmldoc.documentelement.childnodes; for (i=0;i<x.length;i++) { if (x[i].nodetype==1) { document.write(x[i].nodename); document.write("<br />"); </body></html>

25 Przykład <html><head> <script type="text/javascript" src="loadxmldoc.js"/> x=xmldoc.getelementsbytagname("person")[0]. childnodes; for (i=0;i<x.length;i++) { document.write(x[i].nodename); document.write("<br />"); </body></html>

26 Przykład <html><head> <script type="text/javascript" src="loadxmldoc.js"/> x=xmldoc.getelementsbytagname("person")[0].firstchild; x=x.nextsibling; document.write(x.nodename + "<br/>"); x=x.nextsibling; document.write(x.nodename + "<br/>"); x=x.nextsibling; document.write(x.nodename + "<br/>"); x=x.nextsibling; document.write(x.nodename + "<br/>"); </body></html>

27 Kompletny opis obiektów JavaScript i XML DOM można znaleźć na stronie:

Podobne dokumenty

XML extensible Markup Language. część 6

XML extensible Markup Language część 6 HTML DOM Zgodnie z modelem DOM wszystko w dokumencie HTML jest węzłem (ang. node). Cały dokument jest węzłem dokumentu (ang. document node) Każdy element HTML jest