04-XMLDOM (Compatibility Mode)

18/02/2013
Ni dung
XML DOM
Nguyn Hng Phng
Email: phuong.nguyenhong@hust.vn Site: http://is.hut.edu.vn/~phuongnh B mn H thng thng tin Vin Cng ngh thng tin v Truyn thng i hc Bch Khoa H Ni
1
Tng quan XML DOM Thao tc vi cc nt Tham chiu XML DOM
1. DOM l g?
Tng quan XML DOM
L mt chun W3C nh ngha chun truy cp ti liu DOM c 3 phn

Core DOM: m hnh chun cho cc ti liu c cu trc XML DOM: m hnh chun cho cc ti liu XML HTML DOM: m hnh chun cho cc ti liu HTML
DOM nh ngha cc i tng v thuc tnh ca tt c cc phn t ti liu, v cc phng thc truy cp vo chng.
3 4
XML DOM
L m hnh i tng chun cho XML L mt giao din lp trnh chun cho XML c lp vi nn v ngn ng nh ngha mt chun cho truy cp v thao tc vi ti liu XML
2. Cc nt DOM
Mi th trong mt ti liu XML u l nt!
Ton b ti liu l nt ti liu (document node) Mi phn t XML l nt phn t (element node) Vn bn trong cc phn t XML l nt vn bn (text node) Mi thuc tnh l nt thuc tnh (attribute node) Ch thch cng l nt ch thch (comment node)
5 6
18/02/2013
File book.xml
<?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>
File book.xml (tip)

<book category="web"> <title lang="en">XQuery Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> <book category="web" cover="paperback"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>
7 8
File book.xml (tip)

Nt gc l <bookstore>. Cc nt khc trong ti liu phi nm trong nt gc ny. Di nt gc c 4 nt <book>. Nt <book> u tin c cc nt con <title>, <author>, <year>, v <price>. Mi nt con ny cha cc nt text "Everyday Italian", "Giada De Laurentiis", "2005", v "30.00" Ch : text ca nt phn t c cha trong nt text.
V d: <year>2005</year>, nt phn t <year> c mt nt text c gi tr "2005". "2005" khng phi gi tr ca nt phn t year.
9
3. Cy nt XML DOM
10
Cc nt cha, con, anh em

XML DOM coi mt ti liu XML l mt cu trc cy, gi l cy nt. C th truy cp ti tt c cc nt ca cy. C th thm mi, sa, xa cc phn t. Cc nt trong cy c mi quan h phn cp vi cc nt khc.
Nt nh gi l nt gc Mi nt (tr nt gc) u c 1 nt cha. Mt nt c th c khng/mt/nhiu nt con Nt l l nt khng c nt con. Cc nt anh em l cc nt c cng nt cha.
11
12
18/02/2013
Cc nt cha, con, anh em
4. XML DOM Parser

Hu ht cc trnh duyt c tch hp sn XML Parser c v thao tc vi XML Parser bin i XML thnh mt i tng c th truy cp JavaScript (XML DOM). XML DOM cha cc hm duyt cy XML, truy cp, thm v xa cc nt.
Trc khi thc hin cc thao tc vi ti liu XML, cn np n vo i tng XML DOM
13 14
Np mt ti liu XML
<!DOCTYPE html> <html> <body> <script> if(window.XMLHttpRequest){ xhttp=new XMLHttpRequest(); } else{ // for IE 5/6 xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET","books.xml",false); xhttp.send(); xmlDoc=xhttp.responseXML; document.write("XML document loaded into an XML DOM Object."); </script> </body> </html>
Np mt chui XML
<!DOCTYPE html> <html> <body> <script> text="<bookstore><book>"; text=text+"<title>Everyday Italian</title>"; text=text+"<author>Giada De Laurentiis</author>"; text=text+"<year>2005</year>"; text=text+"</book></bookstore>"; 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); } document.write("XML string is loaded into an XML DOM Object"); </script> </body> </html>
15
16
5. Cc hm np XML DOM
V l do an ton, trang web v file XML m n mun np phi nm trn cng server. Hm loadXMLDoc() Hm loadXMLString()
17
18
18/02/2013
Hm loadXMLDoc()
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; }
Hm loadXMLString()
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; }
File loadxmldoc.js File loadxmldoc1.html
File loadxmlstring.js File loadxmlstring1.html

19 20
6. Giao din lp trnh

DOM m hnh XML nh l mt tp cc i tng nt. C th vit cc on m JavaScript, Java, C#,.... truy cp vo cc nt ny. Giao din lp trnh: xc nh thng qua mt tp cc thuc tnh v phng thc chun.
Thuc tnh XML DOM

C mt s thuc tnh c trng
x.nodeName: tn ca x x.nodeValue: gi tr ca x x.parentNode: nt cha ca x x.childNodes: cc nt con ca x x.attributes: cc nt thuc tnh ca x
21
22
Phng thc XML DOM

x.getElementsByTagName(name): ly v tt c cc phn t m tag c tn l name x.appendChild(node): thm mt nt con vo nt x x.removeChild(node): loi mt nt con ra khi nt x
V d:
on m JavaScript ly v on text ca phn t <title> u tin trong books.xml:
txt = xmlDoc.getElementsByTagName("title")[0]. childNodes[0].nodeValue
23
24
18/02/2013
7. Truy cp vo cc nt
C ba cch
s dng phng thc getElementsByTagName() s dng vng lp duyt cy nt nh hng trong cy, s dng mi quan h nt.
Phng thc getElementsByTagName()

Tr v tt c cc phn t c tn th xc nh. C php:
node.getElementsByTagName("tagname");
V d:
tr v tt c cc phn t <title> di nt x:
x.getElementsByTagName("title");
tr v tt c cc phn t <title> ca ti liu XML

xmlDoc.getElementsByTagName("title");
25 26
Danh sch nt DOM

Phng thc getElementsByTagName() tr v mt danh sch nt tc l mt mng cc nt.
V d:
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title");
Chiu di danh sch nt DOM

S dng thuc tnh length ca danh sch nt: cho bit s nt. S dng vng lp duyt V d:
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); for (i=0;i<x.length;i++){ document.write(x[i].childNodes[0].nodeValue); document.write(" <br /> "); }
Truy cp vo phn t thng qua ch s. Ch s bt u t 0.

V d: truy cp phn t <title> th 3
y=x[2];
27
28
V d: vidu1.html
<!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); for (i=0;i<x.length;i++){ document.write(x[i].childNodes[0].nodeValue); document.write("<br>"); } </script> </body> </html>
Cc kiu nt
Thuc tnh documentElement ca ti liu XML l nt gc. Thuc tnh nodeName ca nt l tn ca nt. Thuc tnh nodeType ca nt l kiu ca nt
<!DOCTYPE html> <html> <head> vidu2.html <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); document.write(xmlDoc.documentElement.nodeName); document.write("<br>"); document.write(xmlDoc.documentElement.nodeType); </script> </body> </html>
29
30
18/02/2013
V d: vidu3.html
<!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.documentElement.childNodes; for (i=0;i<x.length;i++){ if (x[i].nodeType==1){//Process only element nodes (type 1) document.write(x[i].nodeName); document.write("<br />"); } } </script> </body> </html>
31
nh hng quan h nt
<!DOCTYPE html> <html> vidu4.html <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0].childNodes; y=xmlDoc.getElementsByTagName("book")[0].firstChild; for (i=0;i<x.length;i++){ if (y.nodeType==1){//Process only element nodes (type 1) document.write(y.nodeName + "<br>"); } y=y.nextSibling; } </script> </body> </html>
32
8. Thng tin nt XML DOM
Cc thuc tnh nt
Mi nt l mt i tng. i tng c phng thc v thuc tnh. Ba thuc tnh quan trng ca mt nt
nodeName nodeValue nodeType
33
34
Thuc tnh nodeName

Cho bit tn ca 1 nt Read-only
nodeName ca th nodeName ca tn thuc tnh nodeName ca nodeName ca mt nt phn t chnh l tn mt nt thuc tnh chnh l mt nt text l #text mt nt ti liu l #document
V d: vidu5.html
<!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); document.write(xmlDoc.documentElement.nodeName); </script> </body> </html>
35
36
18/02/2013
Thuc tnh nodeValue

Cho bit gi tr ca nt nodeValue ca cc nt phn t l khng xc nh nodeValue ca nt text chnh l text nodeValue ca nt thuc tnh chnh l gi tr thuc tnh Ly v gi tr ca mt phn t
V d: vidu6.html
Ly v gi tr nt text ca phn t <title> u tin
<!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; txt=x.nodeValue; document.write(txt); </script> </body> </html>
38
37
V d: vidu7.html
Thay i gi tr ca phn t <title> u tin
<!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue="Easy Cooking"; x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; txt=x.nodeValue; document.write(txt); </script> </body> </html>
39
Thuc tnh nodeType

Cho bit kiu ca nt Read-only Mt s kiu quan trng:
Node type Element Attribute Text Comment Document NodeType 1 2 3 8 9
40
V d: vidu8.html
<!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"></script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); document.write(xmlDoc.documentElement.nodeName); document.write("<br>"); document.write(xmlDoc.documentElement.nodeType); </script> </body> </html>
9. Danh sch cc nt XML DOM
41
42
18/02/2013
Danh sch nt DOM

Khi s dng thuc tnh hay phng thc (nh childNodes hoc getElementsByTagName) s nhn c i tng tr v l mt danh sch nt, theo trnh t nh trong ti liu XML. Nt c th c truy cp vi ch s bt u t 0
Danh sch nt <title> trong books.html
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); // Nhn v gi tr text ca phn t <title> // u tin trong danh sch nt txt=x[0].childNodes[0].nodeValue;
43
44
Chiu di danh sch nt

Khi mt phn t c thm vo hoc xa i, danh sch s c t ng cp nht. Thuc tnh length ca mt danh sch nt cho bit s nt c trong danh sch.
xmlDoc=loadXMLDoc("books.xml"); //the x variable will hold a node list x=xmlDoc.getElementsByTagName('title'); for (i=0;i<x.length;i++) { document.write(x[i].childNodes[0].nodeValue); document.write("<br />"); }
Danh sch thuc tnh DOM

Thuc tnh attributes ca mt nt phn t tr v mt danh sch cc nt thuc tnh. Nu mt thuc tnh c thm vo hay xa i, danh sch s dc t ng cp nht.
xmlDoc=loadXMLDoc("books.xml");
vidu9.html
x=xmlDoc.getElementsByTagName("book")[0].attributes; document.write(x.getNamedItem("category").nodeValue); document.write("<br>" + x.length);
vidu10.html
45
46
10. Duyt cy nt
Duyt cy nt
<head> <script src="loadxmlstring.js"></script> </head> <body> <script> text="<book>"; text=text+"<title>Everyday Italian</title>"; text=text+"<author>Giada De Laurentiis</author>"; text=text+"<year>2005</year>"; text=text+"</book>"; xmlDoc=loadXMLString(text);
47 48
18/02/2013
Duyt cy nt
// documentElement always represents the root node x=xmlDoc.documentElement.childNodes; for (i=0;i<x.length;i++) { document.write(x[i].nodeName); document.write(": "); document.write(x[i].childNodes[0].nodeValue); document.write("<br>"); } </script> </body> vidu11.html </html>
49
11. Cc trnh duyt DOM
50
Cc trnh duyt DOM

Hu ht cc trnh duyt hin i u h tr cc c t W3C DOM. C mt cht khc bit:
IE khng coi cc k t khong trng/ k t xung dng l cc nt text Cc trnh duyt khc th c!
Hy m file vidu12.html bng cc trnh duyt khc nhau!
12. nh hng trong cy
51
52
nh hng trong cy
Truy cp vo cc nt thng qua mi quan h gia cc nt gi l "nh hng" trong cy. Cc thuc tnh ca nt
parentNode childNodes firstChild lastChild nextSibling previousSibling
53 54
18/02/2013
Nt cha
Tt c cc nt (tr gc) u c chnh xc mt nt cha.
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0]; document.write(x.parentNode.nodeName);
Trnh cc nt text rng

Mt s trnh duyt (nh FireFox) coi k t trng v xung dng l nt text. Vn khi s dng cc thuc tnh: firstChild, lastChild, nextSibling, previousSibling. trnh truy cp vo phn t text rng (k t trng v k t xung dng gia cc nt phn t), s dng hm kim tra kiu nt
function get_nextSibling(n){ y=n.nextSibling; while (y.nodeType!=1){ y=y.nextSibling; } return y; }
55 56
vidu13.html
Ly v phn t con u tin

<html> <head> vidu14.html <script src="loadxmldoc.js"> </script> <script> //check if the first node is an element node function get_firstChild(n){ y=n.firstChild; <body> while (y.nodeType!=1) { y=y.nextSibling; <script> } xmlDoc=loadXMLDoc("books.xml"); return y; } x=get_firstChild(xmlDoc.getElementsByT </script> agName("book")[0]); document.write(x.nodeName); </head> </script> </body> </html>
57
lastChild() nextSibling() previousSibling()
vidu15.html vidu16.html vidu17.html
58
13. Ly v cc gi tr DOM
Thao tc vi cc nt
Ly v gi tr ca mt phn t Ly v gi tr ca mt thuc tnh
59 60
10
18/02/2013
Ly v gi tr ca mt phn t
Cc nt phn t khng c gi tr text Text ca mt nt phn t c lu tr trong nt con, gi l nt text. => ly v text ca nt phn t, ta ly gi tr ca nt con (nt text). Phng thc getElementsByTagName() tr v mt danh sch nt cha tt c cc phn t vi tn th theo tham s ca phng thc ny. Trt t cc phn t theo trt t xut hin ca chng trong ti liu Thuc tnh childNodes tr v mt danh sch cc nt con Thuc tnh nodeValue tr v gi tr text ca nt text
61
x=xmlDoc.getElementsByTagName("title")[0]; y=x.childNodes[0]; txt=y.nodeValue;
vidu18.html
62
Ly v gi tr ca mt thuc tnh
Trong DOM, cc thuc tnh l cc nt. Nt ny c gi tr text. ly gi tr text ca thuc tnh, s dng
phng thc getAttribute() tr v mt gi tr thuc tnh thuc tnh nodeValue
xmlDoc=loadXMLDoc("books.xml"); txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang"); document.write(txt);
vidu19.html
vidu20.html
Phng thc getAttributeNode() tr v mt nt thuc tnh.

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].getAttributeNode("lang"); txt=x.nodeValue;
vidu21.html vidu22.html
63
64
14. Thay i gi tr nt/thuc tnh

Thay i gi tr nt: thuc tnh nodeValue Thay i gi tr thuc tnh: phng thc setAttribute()
Thay i gi tr ca nt text
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue="Easy Cooking";
vidu23.html
65
66
11
18/02/2013
Thay i gi tr ca thuc tnh

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('book'); x[0].setAttribute("category","food"); vidu24.html
15. Loi b nt trong DOM

S dng phng thc removeChild() xa mt nt S dng phng thc removeAttribute() xa mt thuc tnh
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0] y=x.getAttributeNode("category"); y.nodeValue="food"; vidu25.html
67
68
Xa b mt nt phn t
xmlDoc=loadXMLDoc("books.xml"); y=xmlDoc.getElementsByTagName("book")[0]; vidu26.html xmlDoc.documentElement.removeChild(y);
Xa text ca nt text
vidu29.html xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue=""; xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book"); x[0].removeAttribute("category"); vidu30.html
Loi b nt thuc tnh s dng tn
Xa b nt hin ti
xmlDoc=loadXMLDoc("books.xml"); vidu27.html x=xmlDoc.getElementsByTagName("book")[0]; x.parentNode.removeChild(x);
Xa b nt text
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0]; y=x.childNodes[0]; vidu28.html x.removeChild(y);
69
Loi b cc nt thuc tnh s dng tham s i tng

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book"); for (i=0;i<x.length;i++){ while (x[i].attributes.length>0) { attnode=x[i].attributes[0]; old_att=x[i].removeAttributeNode(attnode); } } vidu31.html
70
16. Thay th mt nt
Thay th mt nt phn t Thay th d liu trong mt nt text S dng thuc tnh nodeValue
Thay th mt nt phn t
S dng hm replaceChild()
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.documentElement;
vidu32.html
//create a book element, title element and a text node newNode=xmlDoc.createElement("book"); newTitle=xmlDoc.createElement("title"); newText=xmlDoc.createTextNode("A Notebook"); //add the text node to the title node, newTitle.appendChild(newText); //add the title node to the book node newNode.appendChild(newTitle); y=xmlDoc.getElementsByTagName("book")[0] //replace the first book node with the new node x.replaceChild(newNode,y);
71 72
12
18/02/2013
Thay th d liu trong mt nt text

S dng hm replaceData(), c 3 tham s:
offset: v tr k t u tin s thay th, bt u t 0. length: s k t cn thay th. string: chui mi cn chn vo
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.replaceData(0,8,"Easy");
S dng thuc tnh
C th s dng thuc tnh nodeValue thay th d liu trong nt text

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue="Easy Italian";
vidu34.html
vidu33.html
73 74
17. To nt DOM
To mt nt phn t mi To mt nt thuc tnh mi To mt thuc tnh s dng setAttribute() To mt nt text To mt nt CDATA Section To mt nt ch thch
To mt nt phn t mi
S dng phng thc createElement()
xmlDoc=loadXMLDoc("books.xml"); newel=xmlDoc.createElement("edition"); x=xmlDoc.getElementsByTagName("book")[0]; x.appendChild(newel);
vidu35.html
75
76
To mt nt thuc tnh mi
S dng phng thc createAttribute()
xmlDoc=loadXMLDoc("books.xml"); newatt=xmlDoc.createAttribute("edition"); newatt.nodeValue="first"; x=xmlDoc.getElementsByTagName("title"); x[0].setAttributeNode(newatt);
To nt thuc tnh s dng setAttribute()
Phng thc setAttribute() to nt thuc tnh mi nu n cha tn ti.

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('book'); x[0].setAttribute("edition","first");
77
78
13
18/02/2013
To mt nt text
S dng phng thc createTextNode()
xmlDoc=loadXMLDoc("books.xml");
To nt CDATA Section
S dng phng thc createCDATASection()
xmlDoc=loadXMLDoc("books.xml"); newCDATA=xmlDoc.createCDATASection("Special Offer & Book Sale");
newel=xmlDoc.createElement("edition"); newtext=xmlDoc.createTextNode("first"); newel.appendChild(newtext); x=xmlDoc.getElementsByTagName("book")[0]; x.appendChild(newel);
x=xmlDoc.getElementsByTagName("book")[0]; x.appendChild(newCDATA);
79
80
To nt comment
S dng phng thc createComment()
xmlDoc=loadXMLDoc("books.xml"); newComment=xmlDoc.createComment("Revised March 2008"); x=xmlDoc.getElementsByTagName("book")[0]; x.appendChild(newComment);
18. Thm nt
Thm mt nt - appendChild() Chn mt nt insertBefore() Thm mt thuc tnh mi Thm text vo nt text - insertData()
vidu40.html
81
82
Thm mt nt - appendChild()
Dng phng thc ny thm mt nt con vo nt hin ti.
xmlDoc=loadXMLDoc("books.xml"); newel=xmlDoc.createElement("edition"); x=xmlDoc.getElementsByTagName("book")[0]; x.appendChild(newel);
Chn mt nt insertBefore()
S dng phng thc ny chn mt nt trc mt nt con xc nh. Phng thc ny hu ch khi quan tm ti v tr ca nt thm vo.
x.insertBefore(newNode,null) v x.appendChild(newNode)
xmlDoc=loadXMLDoc("books.xml"); newNode=xmlDoc.createElement("book");
vidu42.html
vidu41.html
x=xmlDoc.documentElement; y=xmlDoc.getElementsByTagName("book")[3]; x.insertBefore(newNode,y);

83 84
14
18/02/2013
Thm mt thuc tnh mi

Khng c addAttribute()! S dng phng thc setAttribute()
s to mi nu cha c thuc tnh s ghi nu c thuc tnh
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('book'); x[0].setAttribute("edition","first");
Thm text vo nt text insertData()

insertData() thm d liu vo nt text ang c. C 2 tham s:
offset: ch s bt u chn k t (tnh t 0) string: chui cn chn
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.insertData(0,"Easy ");
vidu43.html
85
vidu44.html
86
Phng thc cloneNode()

To ra mt bn sao ca mt nt xc nh. C 1 tham s nhn gi tr true/false, cho bit nt sao c bao gm cc thuc tnh v cc nt con ca nt ban u hay khng.
xmlDoc=loadXMLDoc("books.xml"); oldNode=xmlDoc.getElementsByTagName('book')[0]; newNode=oldNode.cloneNode(true); xmlDoc.documentElement.appendChild(newNode); //Output all titles y=xmlDoc.getElementsByTagName("title"); for (i=0;i<y.length;i++) { document.write(y[i].childNodes[0].nodeValue); document.write(" "); vidu45.html }
19. i tng XMLHttpRequest

i tng XMLHttpRequest c s dng trao i d liu vi server
Cp nht mt trang web m khng cn ti li trang web Yu cu d liu t server sau khi trang c ti. Nhn d liu t server sau khi trang c ti. Gi d liu ti server (in the background)
Kt qu: Everyday Italian Harry Potter XQuery Kick Start Learning XML Everyday Italian
Ni dung trnh by:

To mt i tng XMLHttpRequest Gi mt yu cu ti server
88
87
To mt i tng XMLHttpRequest
Tt c cc tnh duyt hin i u tch hp i
tng XMLHttpRequest to i tng XMLHttpRequest:
xmlhttp=new XMLHttpRequest();
Gi yu cu ti server
S dng phng thc open(), send() ca i tng XMLHttpRequest
xmlhttp.open("GET","xmlhttp_info.txt",true); xmlhttp.send();
Phng thc open(method,url,async) M t method: kiu yu cu l GET hoc POST url: v tr ca file trn server async: true (khng ng b), false (ng b) Gi request off ti server string: ch s dng vi yu cu POST
Phin bn IE5, IE6 s dng i tng ActiveX:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); vidu46.html }
89
send(string)
90
15
18/02/2013
GET hay POST

GET n gin v nhanh hn POST, c th c s dng trong hu ht cc trng hp. S dng POST khi:
Cp nht 1 file hoc CSDL trn server Gi mt lng ln d liu ti server (POST khng gii hn kch thc) Gi d liu nhp ca ngi dng (c th cha cc k t cha bit), POST mnh v an ton hn GET.
91
ng b hay khng ng b?
Gi yu cu khng ng b, JavaScript khng phi i tr li ca server, m c th:
thc hin cc script khc trong khi i tr li (response) ca server. thu nhn tr li khi tr li sn sng
92
Async=true
Async=false
Khuyn co khng nn s dng. JavaScript s i n khi tr li ca server sn sng, nu server bn hoc chm th ng dng s b dng hoc treo. Ch : khng vit hm onreadystatechange
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","xmlhttp_info.txt",true); xmlhttp.send();
xmlhttp.open("GET","xmlhttp_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
vidu47.html
vidu48.html
93
94
Server Response
nhn p ng t server, s dng thuc tnh responseText hoc responseXML ca i tng XMLHttpRequest
Thuc tnh responseText responseXML M t Nhn d liu p ng nh l mt xu Nhn d liu p ng nh l d liu XML
Thuc tnh responseText

Nu p ng t server khng phi l XML th s dng thuc tnh responseText
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
vidu49.html
95
96
16
18/02/2013
Thuc tnh responseXML

Nu p ng t server l XML, phn tch n nh l mt i tng XML, ta s dng thuc tnh responseXML.
xmlDoc=xmlhttp.responseXML; var txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + " "; } document.getElementById("myDiv").innerHTML=txt;
S kin onreadystatechange
Khi mt yu cu c gi ti server, chng ta mun thc hin mt s hnh ng da trn p ng. S kin onreadystatechange c kch hot mi khi readyState thay i. Thuc tnh readyState nm trng thi ca XMLHttpRequest.
vidu50.html
97 98
S kin onreadystatechange (tip)

Ba thuc tnh quan trng ca XMLHttpRequest
Thuc tnh onreadystatechange readyState M t Lu tr mt hm/tn mt hm s c t ng gi khi thuc tnh readyState thay i Nm gi trng thi ca i tng XMLHttpRequest, thay i t 0 n 4: 0: yu cu khng c khi to 1: kt ni server c thnh lp 2: nhn yu cu 3: x l yu cu 4: yu cu hon tt v p ng sn sng 200: "OK" 404: Page not found
S kin onreadystatechange (tip)

Khi readyState l 4 v status l 200, p ng sn sng:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
vidu51.html
status
99
100
1. Cc kiu nt
Kiu nt M t Biu din mt vn bn hon chnh (nt gc ca cy DOM) Biu din i tng ti liu nm gi mt phn ti liu Kiu nt c th l nt con Element (ti a ch c 1) ProcessingInstruction, Comment, DocumentType Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Ph lc: Cc kiu nt
Document
DocumentFr agment
DocumentTy pe
Cung cp mt giao din ti cc thc th nh ngha trong ti liu
ProcessingIn Biu din mt ch th x l struction

101 102
17
18/02/2013
EntityRefere nce
Biu din mt tham chiu thc th
Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference Text, EntityReference
CDATASectio Biu din CDATASection n trong ti liu (text khng b kim tra bi trnh kim ng) Comment Biu din mt ch thch
Element
Biu din mt phn t
Entity
Biu din mt thc th
Attr
Biu din mt thuc tnh
Text
Biu din ni dung text trong mt phn t hoc mt thuc tnh
Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Notation
Biu din mt notation khai bo trong DTD
103
104
2. Gi tr tr v
Kiu nt Document DocumentFragment DocumentType EntityReference Element Attr Tn nt tr v #document #document fragment doctype name entity reference name element name attribute name Gi tr nt tr v null null null null null attribute value Kiu nt ProcessingInstruction Comment Text CDATASection Entity Notation Tn nt tr v target #comment #text #cdata-section entity name notation name Gi tr nt tr v content of node comment text content of node content of node null null
105
106
3. Kiu nt cc hng
Kiu nt 1 2 3 4 5 6 Hng ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE CDATA_SECTION_NODE ENTITY_REFERENCE_NODE ENTITY_NODE Kiu nt 7 8 9 10 11 12 Hng PROCESSING_INSTRUCTION_NODE COMMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE DOCUMENT_FRAGMENT_NODE NOTATION_NODE
107
108
18
18/02/2013
Li hay p
"V i ch l mt cu chuyn, nn iu cn thit khng phi l n di hay ngn, m l hay hay d"
Seneca
109
110
19

04-XMLDOM (Compatibility Mode)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

04-XMLDOM (Compatibility Mode)

Uploaded by

Copyright:

Available Formats

18/02/2013

Tng quan XML DOM Thao tc vi cc nt Tham chiu XML DOM

Tng quan XML DOM

L mt chun W3C nh ngha chun truy cp ti liu DOM c 3 phn

File book.xml (tip)

File book.xml (tip)

Cc nt cha, con, anh em

Cc nt cha, con, anh em

4. XML DOM Parser

File loadxmldoc.js File loadxmldoc1.html

File loadxmlstring.js File loadxmlstring1.html

6. Giao din lp trnh

Thuc tnh XML DOM

Phng thc XML DOM

Phng thc getElementsByTagName()

tr v tt c cc phn t <title> ca ti liu XML

Danh sch nt DOM

Chiu di danh sch nt DOM

Truy cp vo phn t thng qua ch s. Ch s bt u t 0.

8. Thng tin nt XML DOM

Thuc tnh nodeName

Thuc tnh nodeValue

Thuc tnh nodeType

9. Danh sch cc nt XML DOM

Danh sch nt DOM

Chiu di danh sch nt

Danh sch thuc tnh DOM

x=xmlDoc.getElementsByTagName("book")[0].attributes; document.write(x.getNamedItem("category").nodeValue); document.write("<br>" + x.length);

11. Cc trnh duyt DOM

Cc trnh duyt DOM

12. nh hng trong cy

Trnh cc nt text rng

Ly v phn t con u tin

lastChild() nextSibling() previousSibling()

vidu15.html vidu16.html vidu17.html

Ly v gi tr ca mt phn t Ly v gi tr ca mt thuc tnh

x=xmlDoc.getElementsByTagName("title")[0]; y=x.childNodes[0]; txt=y.nodeValue;

Phng thc getAttributeNode() tr v mt nt thuc tnh.

14. Thay i gi tr nt/thuc tnh

Thay i gi tr ca thuc tnh

15. Loi b nt trong DOM

xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0] y=x.getAttributeNode("category"); y.nodeValue="food"; vidu25.html

vidu29.html xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue=""; xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book"); x[0].removeAttribute("category"); vidu30.html

Loi b nt thuc tnh s dng tn

Loi b cc nt thuc tnh s dng tham s i tng

Thay th d liu trong mt nt text

S dng thuc tnh

C th s dng thuc tnh nodeValue thay th d liu trong nt text

To nt thuc tnh s dng setAttribute()

Phng thc setAttribute() to nt thuc tnh mi nu n cha tn ti.

newel=xmlDoc.createElement("edition"); newtext=xmlDoc.createTextNode("first"); newel.appendChild(newtext); x=xmlDoc.getElementsByTagName("book")[0]; x.appendChild(newel);

x=xmlDoc.documentElement; y=xmlDoc.getElementsByTagName("book")[3]; x.insertBefore(newNode,y);

Thm mt thuc tnh mi

Thm text vo nt text insertData()

Phng thc cloneNode()

19. i tng XMLHttpRequest

Ni dung trnh by:

Phin bn IE5, IE6 s dng i tng ActiveX:

GET hay POST

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","xmlhttp_info.txt",true); xmlhttp.send();

xmlhttp.open("GET","xmlhttp_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Thuc tnh responseText

Thuc tnh responseXML