XML extensible Markup Language 6
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.
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;
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);
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;
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;
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).
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>
nodename <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodename); </body> </html>
nodevalue <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodevalue); </body> </html>
parentnode <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].parentnode.nodename); </body> </html>
childnodes <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("person"); document.write(x[0].childnodes[3].nodename); </body> </html>
attributes <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodename); </body> </html>
attributes <html> <head> <script type="text/javascript" src="loadxmldoc.js"> x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodevalue); </body> </html>
Właściwość nodetype
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
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
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
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).
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>
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>
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>
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>
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>
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>
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>
Kompletny opis obiektów JavaScript i XML DOM można znaleźć na stronie: http://www.w3schools.com/jsref/default.asp