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 węzłem elementu (ang. element node) Tekst w elementach HTML to węzły tekstu (ang. text node) Każdy atrybut HTML jest węzłem atrybutu (ang. attribute node) Komentarze są węzłami komentarzy (ang. comment nodes)
HTML DOM Przykład <head> <title>my title</title> </head> <body> <a href="">my link</a> <h1>my header</h1> <body> Drzewo węzłów
HTML DOM Według modelu DOM dokument HTML to zbiór węzłów. Do węzłów mamy dostęp przy pomocy języka JavaScript (w czasie zajęć będziemy wykorzystywać język JavaScript). Model DOM daje nam do dyspozycji właściwości oraz metody. Właściwość węzła to pewna jego cecha np. nazwa. Metoda węzła to operacja która może być wykonana na węźle np. usunięcie węzła.
HTML DOM Wybrane właściwości DOM: x.innerhtml zawartość elementu x x.nodename nazwa elementu x x.nodevalue wartość x x.parentnode rodzic elementu x x.childnodes dzieci elementu x x.attributes - atrybuty elementu x gdzie x to węzeł.
HTML DOM Wybrane metody DOM: x.getelementbyid(id) - element z określonym id x.getelementsbytagname(name) elementy 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 gdzie x to nazwa węzła (element HTML).
innerhtml Właściwość ta umożliwia nam w prosty sposób modyfikację zawartości dowolnego elementu HTML. Właściwości innerhtml nie należy do specyfikacji HTML DOM, ale jest wspierana przez większość przeglądarek. Właściwość innerhtml jest przydatna w przypadku pobrania bądź zamiany zawartości elementu HTML (w tym i <body>). Może być także użyta do podejrzenia zawartości strony, która została dynamicznie zmodyfikowana.
Pobieranie informacji Metoda Właściwość <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").innerhtml; document.write("<p>tekst: " + txt + "</p>");
Pobieranie informacji <body> <a name="wp" href="http://www.wp.pl">link 1</a><br/> <a href="http://www.rmf.fm">link 2</a><br/> <a name="o2" href="http://www.o2.pl">link 3</a><br/> <p> <script type="text/javascript"> for(var i=0;i<document.links.length;i++) document.write(document.links[i].innerhtml+"<br/>"); </p>
Pobieranie informacji <body> <a name="wp" href="http://www.wp.pl">link 1</a><br/> <a href="http://www.rmf.fm">link 2</a><br/> <a name="o2" href="http://www.o2.pl">link 3</a><br/> <p> <script type="text/javascript"> Nazwa document.write(document.links.wp.innerhtml+"<br/>"); document.write(document.links[1].innerhtml+"<br/>"); document.write(document.links.o2.innerhtml); </p>
Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').innerhtml); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>
Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').nodename); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>
Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').childnodes[0]. nodevalue); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>
Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').parentnode. attributes[0].name); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>
Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').parentnode. attributes[0].value); } </head> <body onload="nodeinfo()"> <div id="1"> Abcd... </div>
Pobieranie informacji <head> <script> function nodeinfo() { alert(document.getelementbyid('1').parentnode. attributes.length); } </head> <body onload="nodeinfo()" class="a1"> <div id="1"> Abcd... </div>
Pobieranie informacji <head> <script> function nodeinfo() { e = document.getelementsbytagname('div'); alert(e[0].innerhtml+" "+e[1].innerhtml); } </head> <body onload="nodeinfo()"> <div>a</div> <div>b</div>
Pobieranie informacji <head> <script> function nodeinfo() { e = document.getelementsbytagname('div'); e[0].innerhtml = "C"; alert(e[0].innerhtml+" "+e[1].innerhtml); } </head> <body onload="nodeinfo()"> <div>a</div> <div>b</div>
Modyfikacja Wybrane metody DOM: 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).
Modyfikacja <head> <script> function dodaj() { newnode = document.createtextnode("a"); document.getelementbyid("1").appendchild(newnode); } </head> <body> <div id="1"></div> <input type="button" value="+node" onclick="dodaj()">
Modyfikacja <head> <script> i=1; function dodaj(){ newnode = document.createtextnode(i); i++; document.getelementbyid("1").appendchild(newnode); } </head> <body> <div id="1"></div> <input type="button" value="+node" onclick="dodaj()">
Modyfikacja <head> <script> function dodaj(){ newnode1 = document.createtextnode("a"); newnode2 = document.createelement("p"); newnode2.appendchild(newnode1); document.getelementbyid("1").appendchild(newnode2); } </head> <body> <div id="1"></div> <input type="button" value="+node" onclick="dodaj()">
Modyfikacja <body> <div id="div1"> <p id="p1">this is a paragraph.</p> <p id="p2">this is another paragraph.</p> </div> <script> var para = document.createelement("p"); var node = document.createtextnode("this is new."); para.appendchild(node); var element = document.getelementbyid("div1"); var child = document.getelementbyid("p1"); element.insertbefore(para,child);
Modyfikacja <div id="div1"> <p id="p1">this is a paragraph.</p> <p id="p2">this is another paragraph.</p> </div> <script> var parent = document.getelementbyid("div1"); var child = document.getelementbyid("p1"); parent.removechild(child);
Pobieranie informacji Metoda Właściwość <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").nodename; document.write("<p>tekst: " + txt + "</p>");
Pobieranie informacji Metoda Właściwość <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").parentnode.nodename; document.write("<p>tekst: " + txt + "</p>");
Pobieranie informacji Metoda Właściwości <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").childnodes[0]. nodevalue; document.write("<p>tekst: " + txt + "</p>");
Dostęp do węzłów Dostęp do węzłów można uzyskać na trzy sposoby: przez użycie metody getelementbyid() przez użycie metody getelementsbytagname() przez nawigację po drzewie węzłów wykorzystując zależności między węzłami
getelementbyid Metoda getelementbyid zwraca element z określonym ID. Składnia: node.getelementbyid("id")
getelementbyid <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").innerhtml; document.write("<p>tekst: " + txt + "</p>");
getelementbyid <head> <script type="text/javascript"> //patrz następny slajd </head> <body> <div id="wr1" style="position:absolute;left:10px;top:100px;visibility: visible;"> <img width="200" id="rys1" src="auto.jpg" onmouseover="move()"> </div> <input type="button" value="move" onclick="move()">
getelementbyid Java Script: function move() { var selector =document.getelementbyid('wr1').style; var oldleft = parseint(selector.left); var newleft = (oldleft + 20); selector.left = newleft + "px"; }
getelementbyid <head> <script type="text/javascript"> //patrz dwa slajdy dalej </head> <body> <div id="wr1" style="position:absolute;left:10px;top:200px;visibility:hidden;"> <img width="200" id="rys1" src="sanfra.jpg" onclick="change('wr1')"> </div> <div id="wr2" style="position:absolute;left:280px;top:170px;visibility:hidden;"> <img width="200" id="rys1" src="auto.jpg" onclick="change('wr2')"> </div> //patrz następny slajd
getelementbyid <div style="position:absolute;top:55px;"> <div style="position:absolute;left:20px;"> <img width="80" id="r1" src="sanfra.jpg"><br> <form> <input style="position:absolute;left:30px;" type="checkbox" name="wr1" onclick="show(this.form.wr1)"/> </form> </div> <div style="position:absolute;left:160px;"> <img width="80" id="r2" src="auto.jpg"><br> <form> <input style="position:absolute;left:30px;" type="checkbox" name="wr2" onclick="show(this.form.wr2)"/> </form> </div> </div>
getelementbyid Java Script: function show(f) { if (f.checked) document.getelementbyid(f.name).style. visibility="visible"; else document.getelementbyid(f.name).style. visibility="hidden"; }
getelementbyid Rezultat:
getelementbyid Rezultat:
getelementbyid Rezultat:
getelementbytagname Metoda getelementsbytagname zwraca listę elementów (ang. nodelist) o określonej nazwie. Składnia: node.getelementsbytagname("name") Do poszczególnych elementów listy odwołujemy się za pomocą indeksu przy czym pierwszy element posiada indeks = 0.
getelementbytagname <body> <p>hello World!</p> <script type="text/javascript"> x=document.getelementsbytagname("p"); document.write("tekst: " + x[0].innerhtml);
getelementbytagname <body> <p>hello World!</p> <div id="main"> <p>niedziela</p> </div> <script type="text/javascript"> x=document.getelementbyid("main").getelementsbytagn ame("p"); document.write("pierwszy akapit w div: " + x[0].innerhtml);
getelementbytagname <body> <p>hello World!</p> <p>niedziela</p> <script type="text/javascript"> x=document.getelementsbytagname("p"); document.write("tekst: "+x[0].innerhtml + "<br>"); document.write("tekst: "+x[1].innerhtml);
getelementbytagname <body> <p>hello World!</p> <p>model DOM</p> <p>wlasciwosc length</p> <script type="text/javascript"> x=document.getelementsbytagname("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerhtml); document.write("<br/>"); }
Przechodzenie drzewa węzłów Następujące właściwości: parentnode węzeł będący rodzicem firstchild pierwsze dziecko lastchild ostatnie dziecko umożliwiają przechodzenie drzewa węzłów.
Przechodzenie drzewa węzłów parentnode elementów p i div firstchild elementu body <body> <p>hello World!</p> <div> <p>model DOM!</p> <p>zaleznosci miedzy wezlami</p> </div> lastchild elementu body i parentnode elementów p
Przechodzenie drzewa węzłów <body> <p id="intro">hello World!</p> <script type="text/javascript"> x=document.getelementbyid("intro"); document.write(x.firstchild.nodevalue);
Przechodzenie drzewa węzłów Istnieją dwie szczególne właściwości dokumentu: document.documentelement węzeł będący rodzicem document.body dostęp do znacznika body
Przechodzenie drzewa węzłów <body> <p>hello World!</p> <div> <p>model DOM</p> </div> <script type="text/javascript"> x=document.body; alert(x.innerhtml);
Właściwości węzłów W modelu DOM każdy węzeł jest obiektem. Obiekty posiadają właściwości i metody umożliwiające manipulowanie obiektami. Ważne właściwości węzłów: nodename nodevalue nodetype
nodename Właściwość określająca nazwę węzła. nodename jest typu read-only nodename dowolnego węzła będącego znacznikiem to nazwa znacznika nodename dowolnego węzła będącego atrybutem to nazwa atrybutu nodename dowolnego węzła będącego tekstem (tekst) to #tekst nodename węzła dokumentu to #dokument
nodevalue Właściwość określająca wartość węzła. nodevalue dla dowolnego węzła będącego znacznikiem brak nodevalue dowolnego węzła będącego atrybutem to wartość atrybutu nodevalue dowolnego węzła będącego tekstem to sam tekst
nodevalue <body> <p id="intro">hello World!</p> <script type="text/javascript"> x=document.getelementbyid("intro"); document.write(x.firstchild.nodevalue);
nodetype Właściwość zwraca typ węzła. Typ elementu Typ węzła Element 1 Atrybut 2 Tekst 3 Komentarz 8 document 9
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 Znamy już następujące 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 <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodename);
nodevalue <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodevalue);
parentnode <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); document.write(x[1].parentnode.nodename);
childnodes <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person"); document.write(x[0].childnodes[3].nodename);
attributes <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodename);
attributes <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodevalue);
Właściwość nodetype
nodetype Typ elementu <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); document.write(x[1].nodetype); Typ Element 1 Atrybut 2 Tekst 3 Komentarz 8 Dokument 9
nodetype Typ elementu <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); Tekst Komentarz Dokument 3 8 9 x=xmldoc.getelementsbytagname("profession"); document.write(x[1].parentnode.parentnode.parentnod e.nodetype); Typ Element 1 Atrybut 2
nodetype Typ elementu <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person"); document.write(x[0].attributes[0].nodetype); 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 <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); new_elem=xmldoc.createelement("hobby"); x=xmldoc.getelementsbytagname("person")[0]; x.appendchild(new_elem); document.write(x.getelementsbytagname("hobby")[0].node Name);
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 <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); y=xmldoc.getelementsbytagname("person")[0]; x=xmldoc.documentelement.removechild(y); document.write("removed node: " + x.nodename);
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 <head> <script type="text/javascript" src="loadxmldoc.js"> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.documentelement; new_node=xmldoc.createelement("hobby"); y=xmldoc.getelementsbytagname("profession")[0] x.replacechild(new_node,y);
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 <head> <script type="text/javascript" src="loadxmldoc.js"/> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("profession"); for (i=0;i<x.length;i++){ document.write(x[i].childnodes[0].nodevalue); document.write("<br/>"); }
Przykład <head> <script type="text/javascript" src="loadxmldoc.js"/> </head><body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.documentelement.childnodes; for (i=0;i<x.length;i++) { if (x[i].nodetype==1) { document.write(x[i].nodename); document.write("<br />"); } }
Przykład <head> <script type="text/javascript" src="loadxmldoc.js"/> </head> <body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); x=xmldoc.getelementsbytagname("person")[0]. childnodes; for (i=0;i<x.length;i++) { document.write(x[i].nodename); document.write("<br />"); }
Przykład Kod strony WWW: <head> <script type="text/javascript" src="loadxmldoc.js"/> </head><body> <script type="text/javascript"> xmldoc=loadxmldoc("test.xml"); 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/>");
Kompletny opis obiektów JavaScript i XML DOM można znaleźć na stronie: http://www.w3schools.com/jsref/default.asp