10-XML Và Mô Hình DOM (3t)

RKING HARD & SMART TODAY FOR A BETTER TOMORROW Web kinh doanh 1
XML và Mô hình DOM
Trang 1
Mục tiêu bài học

 Hiểu về HTML DOM trong thiết kế web
 Nắ m đượ c nhữ ng tính nă ng ưu việt củ a HTML DOM kết hợ p vớ i
JavaScript
 Vậ n dụ ng tính độ ng củ a HTML DOM và o việc thiết kế và xây dự ng
website
 Hiểu và phâ n tích đượ c cấ u trú c tà i liệu XML
 Hiểu đượ c cơ chế hoạ t độ ng củ a AJAX trong việc truy suấ t dữ liệu
Trang 2
Nội dung bài học

1. Giớ i thiệu về HTML DOM
2. Thuộ c tính (Property) và Phương thứ c (Method) trong DOM
3. Xử lý sự kiện (Event) trong DOM
4. Giớ i thiệu về XML
5. Cá c thà nh phầ n củ a XML
6. Giớ i thiệu AJAX
Trang 3
1. Giới thiệu về HTML DOM

 HTML DOM = HTML Document Object Model
 Xem trang web như mộ t cây gồ m nhiều nú t (node)
– Mỗ i nú t là mộ t thà nh phầ n (tag HTML, thuộ c tính, nộ i dung củ a tag)
 DOM là mộ t chuẩ n củ a W3C
Trang 4
<html>  Nú t gố c là <html>
<head>  Tấ t cả cá c nú t cò n lạ i
<title>DOM Tutorial</title> trong DOM chứ a trong
</head> <html>
<body>  Nú t <html> có hai nú t con
<h1>DOM Lesson one</h1> là <head> và <body>
<p>Hello world!</p>
 Nú t <head> chứ a nú t
</body>
<title>
</html>
 Nú t <body> chứ a nú t <p>
Trang 5

 Cây DOM
Trang 6

 Nút Parents, Children, và Siblings
• Cá c nú t trong cây có mố i quan hệ phâ n tầ ng. Cá c thuậ t ngữ Parents,
Children, và Siblings dù ng để mô tả mố i quan hệ trên
– Parent có nhiều nú t children
– Ngang cấ p vớ i children gọ i là nú t sibling
• Mộ t số lưu ý trong cây HTML DOM:
– Nú t trên cù ng gọ i là nú t gố c (root)
– Tấ t cả cá c nú t ngoạ i trừ nú t gố c đều có duy nhấ t mộ t nú t cha (parent)
– Mộ t nú t có nhiều nú t con (children)
– Ngang cấ p vớ i nú t con là nú t anh em (sibling)
– Nú t lá khô ng có nú t con
Trang 7

Trang 8

 Giả i thích
<html> – Nú t gố c là <html> khô ng có nú t cha
<head> – Nú t cha củ a nú t <head>, <body> là nú t
<title>DOM Tutorial</title> <html>
</head> – Nú t cha củ a nú t “Hello world” là nú t <p>
<body>  Và
– Nú t <html> có 2 nú t con: <head>, <body>
<h1>DOM Lesson one</h1>
– Nú t <head> có mộ t nú t con: <title>
<p>Hello world!</p> – Nú t <title> có mộ t nú t con “DOM
</body> Tutorial”
</html> – Nú t <h1> và <p> là 2 nú t anh em cả 2 đều
là nú t con củ a nú t <body>
Trang 9
2. Thuộc tính và Phương thức trong DOM

 Mộ t số Method củ a document
– document.createElement(“tag”): tạ o mộ t element
– document.getElementById(“id”): tìm mộ t element theo ID
– document.getElementsByTagName(“tag”): tìm cá c element theo tag
– document.getElementsByClassName(“class”): tìm cá c element theo
class (Chrome, FF, IE9)
Trang 10

 Mộ t số thuộ c tính củ a Element:
– x.id – id củ a x
– x.tagName – tên tag củ a x
– x.innerHTML – giá trị text củ a x
– x.parentNode – nú t cha củ a x
– x.childNodes – cá c nú t con củ a x
– x.attributes – cá c thuộ c tính củ a x
– x.className – tên class củ a x
Trang 11

 Mộ t số phương thứ c củ a Element
– x.getElementsByClassName(“class”): tìm cá c element theo class
(Chrome, FF, IE9)
– x.getElementsByTagName(“name”) – tìm cá c element theo tên tag
– x.querySelector(“selectors”) – tìm cá c element theo css selector
– x.appendChild(node) – thêm nú t con đến x
– x.removeChild(node) – xó a nú t con từ x
– x.setAttribute(“attr”, “value”) – đặ t lạ i giá trị attribute cho x
Trang 12

 Properties
• innerHTML -Lấy giá trị củ a thẻ <p> vớ i id = “intro”
<body>
– Dù ng để truy xuấ t hay thay
<p id="intro">Hello World!</p>
đổ i nộ i dung, định dạ ng củ a
thẻ HTML bao gồ m cả thẻ <script type="text/javascript">
<html> và <body> txt=document.getElementById("intro").
– Trong innerHTML;
ví dụ bên:
getElementById là phương document.write("<p>The text from the
thứ c, innerHTML là thuộ c intro paragraph: " + txt + "</p>");
tính. </script>
</body>
Trang 13

 Properties
-Lấy giá trị củ a thẻ <p> vớ i id = “intro”
• childNodes vs nodeValue
<body>
– Dù ng để lấy nộ i dung củ a <p id="intro">Hello World!</p>
cá c thẻ <script type="text/javascript">
– Trong ví dụ bên: txt=document.getElementById("in
getElementById là tro").childNodes[0].nodeValue;
phương thứ c, childNodes document.write("<p>The text
và nodeValue là thuộ c from the intro paragraph: " + txt +
tính  "</p>");
</script>
</body>
Trang 14

 Và nhiều đố i tượ ng trong DOM, tham khả o tạ i:
• https://www.w3schools.com/jsref/dom_obj_document.asp
• https://www.w3schools.com/jsref/dom_obj_all.asp
• https://www.w3schools.com/jsref/dom_obj_attributes.asp
• https://www.w3schools.com/jsref/dom_obj_event.asp
• https://www.w3schools.com/jsref/dom_obj_style.asp
Trang 15

 Methods
• getElementById()
– Dù ng để truy xuấ t nú t (thẻ) vớ i tham số là id củ a nú t (thẻ) đó
– Cú phá p:
node.getElementById("id")
• Ví dụ :
document.getElementById("intro");
Trang 16

 Ví dụ:
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro"); //lấy nú t x có id là intro
document.write("<p>The text from the intro paragraph: " +
x.innerHTML + "</p>"); //ghi giá trị củ a nú t x ra trình duyệt sử dụ ng
thuộ c tính innerHTML
</script>
</body>
Trang 17

 Methods
• getElementsByTagName()
– Dù ng để truy xuấ t nú t (thẻ) có tên thẻ giố ng nhau
– Cú phá p:
node.getElementsByTagName("tagname");
• Ví dụ :
document.getElementsByTagName("p");
 Truy xuấ t tấ t cả cá c thẻ có tên là <p>  danh sá ch thẻ <p>
Trang 18

 Ví dụ:
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>getElementsByTagName</b>
method.</p>
x=document.getElementsByTagName("p"); // lấy tấ t cả thẻ có tên là p
document.write("Text of first paragraph: " + x[0].innerHTML); //ghi ra giá
trị củ a thẻ đầ u tiên
</script>
</body>
Trang 19

 getElementsByTagName() trả về mộ t danh sá ch cá c thẻ có tên giố ng
nhau:
 Ví dụ :
x=document.getElementsByTagName("p");
 Trong danh sá ch này có mộ t số đặ c điểm sau:
– Vị trí đầ u tiên là 0
– Để truy xuấ t từ ng phầ n tử trong danh sá ch, ví dụ muố n truy xuấ t
phầ n tử thứ 1, ta dù ng:
y = x[1];
 Muố n lấy độ dà i củ a danh sá ch ta dù ng thuộ c tính length
Trang 20

 Ví dụ: <body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the length property.</p>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
</script>
</body>
Trang 21

 Có thể thay đổ i nộ i dung hay thuộ c tính củ a thẻ HTML khi xảy ra mộ t sự
kiện
 Sự kiện xảy ra khi ngườ i dù ng tá c độ ng và o mộ t đố i tượ ng nà o đó trên
trình duyệt, khi mộ t trang đượ c nạ p (load) lạ i hoặ c khi form đượ c
submit
Trang 22

<html>
 Sự kiện onclicknhấn chuột: <head>
 Ví dụ 1: function ChangeText()
{
• Thay đổ i nộ i dung text củ a thẻ khi document.getElementById("p1").
có sự kiện xảy ra bằ ng cá ch viết innerHTML="New text!";
mộ t hà m và sau đó gắ n hà m đó và o }
sự kiện onclick </script>
</head>
• Ví dụ bên ta xây dự ng hà m
ChangeText() bằ ng ngô n ngữ <body>
JavaScript <p id="p1">Hello world!</p>
<input type="button"
onclick="ChangeText()"
value="Change text" />
</body>
</html>
Trang 23

<html>
 Sự kiện onclicknhấn chuột: <body>
 Ví dụ 2:
• Sự kiện onclick đượ c thự c thi khi onclick="document.body.style.
ngườ i dù ng tá c độ ng click lên đố i backgroundColor='lavender';"
tượ ng trên form value="Change background
• Ví dụ bên là m thay đổ i mà u nền củ a color" />
thẻ <body> khi button đượ c click
</body>
</html>
Trang 24
3. Xử lý sự kiện (Event) trong DOM <html>

<head>
 Sự kiện onclicknhấn chuột: <script type="text/javascript">
function ChangeStyle()
{
 Ví dụ 3: document.getElementById("p1").style
• Thay đổ i mà u (color) và font củ a .color="blue";
thẻ HTML sử dụ ng hà m. document.getElementById("p1").style
.fontFamily="Arial";
• Ví dụ dướ i đây là m thay đổ i mà u và }
font củ a nộ i dung củ a thẻ <p> </script>
</head>
<body>
<p id="p1">Hello world!</p>
onclick="ChangeStyle()"
value="Change style" />
</body>
</html>
Trang 25

 Một số sự kiện thông dụng
• Hầ u hết cá c thẻ trên trang đều chứ a đự ng cá c sự kiện
– A mouse click
– A web page or an image loading
– Mousing over a hot spot on the web page
– Selecting an input box in an HTML form
– Submitting an HTML form
– A keystroke
• Ghi chú : mộ t sự kiện trên trang thườ ng đượ c gắ n vớ i mộ t hà m, hà m này
chỉ thự c thi khi sự kiện xảy ra
• Tham khả o địa chỉ:
http://www.w3schools.com/jsref/dom_obj_event.asp
Trang 26

 Bà i tậ p: Viết lệnh di chuyển chuộ t và o dò ng nà o trong Table thì tô nền
và ng dò ng đó , di chuyển chuộ t ra thì tô nền xanh.
Trang 27
4. Giới thiệu về XML

 XML = EXtensible Markup Language
– Là ngô n ngữ đá nh dấ u như HTML
– Dù ng để lưu trữ dữ liệu
– Ngườ i dù ng tự tạ o cá c tag
 So sá nh vớ i HTML
– HTML: hiển thị dữ liệu
– XML: lưu trữ và trao đổ i dữ liệu
• XML đượ c sử dụ ng rấ t nhiều trong việc lưu trữ dữ liệu cũ ng
như cá c tậ p tin cấ u hình, đượ c sử dụ ng song song vớ i JSon
Trang 28

 Ví dụ mẫ u file XML
<sinhvien>
<mssv>K123456789</mssv>
<hoTen>Nguyen Van A</hoTen>
<ngaySinh>7/7/1997</ngaySinh>
<gioiTinh>Nữ </gioiTinh>
</sinhvien>
Trang 29

 XML có mộ t số ưu điểm:
• Tá ch biệt dữ liệu vớ i hiển thị (HTML)
• Đơn giả n hó a việc chia sẻ dữ liệu trên web
• Đơn giả n hó a việc chuyển dữ liệu giữ a nhiều platform
• Có thể mở rộ ng dữ liệu nhanh chó ng
Trang 30

<bookstore> Ví dụ Cấu trúc cây XML
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
</bookstore>
Trang 31

 Các lưu ý quan trọng:
• Cá c thẻ mở phả i có thẻ đó ng tương ứ ng
• Tên thẻ phâ n biệt chữ hoa, thườ ng
• XML document phả i có mộ t thẻ root
• Giá trị cá c thuộ c tính phả i đặ t trong nháy kép (hoặ c nháy đơn)
• Comment

Trang 32

 Các ký tự đặc biệt:
< < Nhỏ hơn
> > Lớ n hơn
& & Dấ u và &
' ' Dấ u nháy đơn
" " Dấ u nháy đô i
Trang 33
5. Các thành phần của XML

 XML Element
 XML Attributes
 XML và Javascript
Trang 34
XML Element
 Thể hiện bở i cá c tag
 Element có thể chứ a:
– Element khá c
– Text
– Attributes
 Element có thể mở rộ ng
<sinhvien>
<sinhvien>
<mssv>9876</mssv>
<mssv>9876</mssv>
<ten>Vo Danh</ten>
</sinhvien>
</sinhvien>
Trang 35
XML Attributes
 Thể hiện cá c thô ng tin củ a Element
 Thô ng tin Attributes cũ ng có giá trị tương đương Elements con
<sinhvien>
<mssv>9876</mssv>
<ten>Vo Danh</ten>
</sinhvien>
<sinhvien mssv=“9876”>
<ten>Vo Danh</ten>
</sinhvien>
Trang 36
XML và Javascript
 Đố i vớ i chuỗ i XML trong HTML
– Sử dụ ng DOM
 Đố i vớ i file XML ngoà i HTML
– Sử dụ ng AJAX
Trang 37
XML và Javascript
 Chuyển chuỗ i thà nh xml document
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(txt,"text/xml");
 Truy cậ p cá c phầ n tử trong xml
– Sử dụ ng DOM
Trang 38
XML và Javascript Ví dụ đọc dữ liệu XML

var txt="<bookstore><book>";
txt += "<title>Everyday Italian</title>";
txt += "<author>Giada De Laurentiis</author>";
txt += "<year>2005</year>";
txt += "</book></bookstore>";
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(txt,"text/xml");
var kq = document.getElementById("kq");
kq.innerHTML = xmlDoc.getElementsByTagName("title")
[0].childNodes[0].nodeValue;
Trang 39
6. Giới thiệu AJAX

 AJAX = Asynchronous JavaScript and XML.
– Kỹ thuậ t load dữ liệu bấ t đồ ng bộ bằ ng Javascript và XML
 Kết hợ p giữ a:
– Đố i tượ ng XMLHttpRequest
– Javascript DOM
– CSS
– XML
Trang 40
6. Giới thiệu AJAX
Trang 41
XMLHttpRequest
 Dù ng trao đổ i dữ liệu vớ i server ở phía dướ i nền
 Khở i tạ o đố i tượ ng (IE7+, Firefox, Chrome, Safari, and Opera):
var xhr =new XMLHttpRequest();
 Đố i vớ i IE6 về trướ c:
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
Trang 42
Gửi request
Method Description
open(method,url,async) Specifies the type of request, the URL, and if the
request should be handled asynchronously or not.
method: the type of request: GET or POST
url: the location of the file on the server
async: true (asynchronous) or false (synchronous)
send(string) Sends the request off to the server.

string: Only used for POST requests
xhr.open("GET","ajax_info.xml",true);
xhr.send();
Trang 43
Nhận response
Property Description
responseText get the response data as a string
responseXML get the response data as XML data
var xmlDoc = xhr.responseXML;

var kq = document.getElementById("kq");
kq.innerHTML =
xmlDoc.getElementsByTagName("title")
[0].childNodes[0].nodeValue;
Trang 44
Kiểm tra state

Property Description
onreadystatechange Stores a function (or the name of a function) to be called
automatically each time the readyState property changes
readyState Holds the status of the XMLHttpRequest. Changes from 0
to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: "OK"
404: Page not found
Trang 45
Kiểm tra state
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
//xu ly khi load duoc data
}
else
{
//xu ly khi khong load duoc data
}
}
Trang 46
Một số ví dụ
 Hiển thị danh sá ch sinh viên lưu trong file xml khi load trang web
 Thô ng tin sinh viên gồ m: <root>
<sinhvien>
– mssv <mssv>K114069876</mssv>
– họ tên <hoTen>Vô Danh</hoTen>
– ngày sinh <ngaySinh>1/1/1993</ngaySinh>
<gioiTinh>Nam</gioiTinh>
– giớ i tính <hinh>hinh1.jpg</hinh>
– hình ả nh </sinhvien>
...
</root>
Đặ t đạ i là SV.XML
Trang 47
Một số ví dụ
 Trang danh sá ch HTML Đặ t đạ i là DanhSachSV.HTML
<h1>Danh sach</h1>
<div id="kq"> </div>
Trang 48
Một số ví dụ
 Tạ o đố i tượ ng XMLHttpRequest
Trang 49
Một số ví dụ
 Xử lý dữ liệu nhậ n dượ c
Trang 50
Một số ví dụ
 Kết quả
Lưu ý, khi truy suấ t XML file khô ng đượ c thì nhớ cấ u hình IIS Web Server
Trang 51
Một số ví dụ
 Ví dụ cd_catalog.xml trên w3c
Double click và o biểu tượ ng,

lưu file Xml này cù ng cấ p vớ i
HTML
Trang 52
Một số ví dụ
<!DOCTYPE html>
<html> ViduAJAX.html
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
Trang 53
Một số ví dụ
<body>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Get my CD collection</button>

<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
Trang 54
Một số ví dụ
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
Trang 55
Một số ví dụ
Trang 56
Hey!
Coding
is easy!
END
Trang 57

10-XML Và Mô Hình DOM (3t)

Uploaded by

Copyright:

Available Formats

You might also like

10-XML Và Mô Hình DOM (3t)

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

10-XML Và Mô Hình DOM (3t)

Uploaded by

Copyright:

Available Formats

RKING HARD & SMART TODAY FOR A BETTER TOMORROW Web kinh doanh 1

XML và Mô hình DOM

Mục tiêu bài học

Nội dung bài học

1. Giới thiệu về HTML DOM

1. Giới thiệu về HTML DOM

1. Giới thiệu về HTML DOM

1. Giới thiệu về HTML DOM

1. Giới thiệu về HTML DOM

1. Giới thiệu về HTML DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

2. Thuộc tính và Phương thức trong DOM

3. Xử lý sự kiện (Event) trong DOM

3. Xử lý sự kiện (Event) trong DOM

3. Xử lý sự kiện (Event) trong DOM

3. Xử lý sự kiện (Event) trong DOM <html>

3. Xử lý sự kiện (Event) trong DOM

3. Xử lý sự kiện (Event) trong DOM

4. Giới thiệu về XML

4. Giới thiệu về XML

4. Giới thiệu về XML

4. Giới thiệu về XML

4. Giới thiệu về XML

4. Giới thiệu về XML

&amp; & Dấ u và &

&apos; ' Dấ u nháy đơn

&quot; " Dấ u nháy đô i

5. Các thành phần của XML

XML và Javascript Ví dụ đọc dữ liệu XML

6. Giới thiệu AJAX

6. Giới thiệu AJAX

send(string) Sends the request off to the server.

var xmlDoc = xhr.responseXML;

Kiểm tra state

Kiểm tra state

Double click và o biểu tượ ng,

<h1>The XMLHttpRequest Object</h1>

<button type="button" onclick="loadDoc()">Get my CD collection</button>

You might also like

& & Dấ u và &

' ' Dấ u nháy đơn

" " Dấ u nháy đô i