XML extensible Markup Language część 6
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"> </head> <body> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodename); </body> </html>
nodevalue <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodevalue); </body> </html>
parentnode <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].parentnode.nodename); </body> </html>
childnodes <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> x=xmldoc.getelementsbytagname("person"); document.write(x[0].childnodes[3].nodename); </body> </html>
attributes <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodename); </body> </html>
attributes <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> 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"> </head> <body> x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodetype); </body> </html> Typ Element 1 Atrybut 2 Tekst 3 Komentarz 8 Dokument 9
attributes Typ elementu <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> Komentarz Dokument 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"> </head> <body> x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodetype); </body> </html> Typ Element 1 Atrybut 2 Tekst 3 Komentarz 8 Dokument 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"> </head> <body> new_elem=xmldoc.createelement("hobby"); x=xmldoc.getelementsbytagname("person")[0]; x.appendchild(new_elem); document.write(x.getelementsbytagname("hobby")[0].node Name); </body> </html>
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> <hobby></hobby> <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>
romovechild <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> y=xmldoc.getelementsbytagname("person")[0]; x=xmldoc.documentelement.removechild(y); document.write("removed node: " + x.nodename); </body> </html>
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>
replacechild <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> x=xmldoc.documentelement; new_node=xmldoc.createelement("hobby"); y=xmldoc.getelementsbytagname("profession")[0] x.replacechild(new_node,y); </body> </html>
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> <hobby></hobby>
Przykład <html> <head> <script type="text/javascript" src="loadxmldoc.js"/> </head> <body> 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"/> </head><body> 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"/> </head> <body> 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"/> </head><body> 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