Bài giảng Phát triển ứng dụng web - Javascript - DOM

1Javascript - DOM
Luong Tran Hy Hien
2Nội dung
1. Tổng quan về DOM – HTML
2. Một số đối tượng
3. Làm việc với document - DOM
4. Xử lý sự kiện (event)
5. Một số ví dụ
31. Tổng quan về DOM – HTML
• 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 định nghĩa một cách để truy xuất và điều
khiển các thành phần trong 1 trang web
41. Tổng quan về DOM – HTML
51. Tổng quan về DOM – HTML
61. Tổng quan về DOM – HTML
71. Tổng quan về DOM – HTML
• Mỗi đối tượng DOM đều có danh sách thuộc
tính (Properties) và danh sách các phương
thức (Method) tương ứng.
• objectName.propertyName= value
• Vídụ: document.bgColor= “blue”;
• objectName.methodName()
• Vídụ: window.focus();
82. Một số đối tượng trong DOM
1. window
2. location
3. history
4. navigator
5. document
6. image
7. form
8. element
2.1. DOM - window
• Là thể hiện của đối tượng cửa sổ trình
duyệt
• Tồn tại khi mở 1 tài liệu HTML
• Sử dụng để truy cập thông tin window
• Điều khiển các sự kiện xảy ra trong
window
• Nếu tài liệu định nghĩa nhiều frame,
browser tạo 1 window object cha và các
window object con cho từng frame
9
10
2.1. DOM - window
11
2.2. DOM - location
Chứa thông tin 
hiện tại của URL
12
2.3. DOM - history
Cung cấp danh sách các URL 
đã được duyệt bởi người sử dụng.
13
2.4. DOM - navigator
Cung cấp thông tin 
về trình duyệt.
14
2.5. DOM - document
• Biểu diễn cho toàn bộ các thành phần
trong 1 tài liệu HTML
• Dùng để lấy thông tin về tài liệu, các
thành phần HTML và xử lý sự kiện
15
2.5. DOM - document
16
2.6. DOM – image
• Truy xuất đến tag trên trang web
• Có thể truy xuất thông qua:
– document.images[index]
– document.images[“ImageName”]
– document.ImageName
• Một số thuộc tính của Image Obj
– alt, border, classname, title,
– width, height, hspace, vspace, 
– id, name, src, lowsrc, longDesc, 
– isMap, complete
17
2.7. DOM – form
• Dùng để truy xuất đến tag trên trang web
• Có thể truy xuất thông qua
– document.forms[index]
– document.forms[“FormName”]
– document.FormName
• Một số thuộc tính
– action, method, id, name, target
– classname, title, language, dir
– elements[ ]
• Một số phương thức
– reset( ), submit( )
18
2.8. DOM – element
• Tương ứng với form field.
• Cách truy xuất 
document.formName.controlName
-------------------------------------------------------------------------------
document.searchForm.entry
document.searchForm.elements[0]
document.forms[“searchForm”].elements[“entry”]
document.forms[“searchForm”].entry
19
3. Làm việc với document - DOM
Biểu diễn nội dung tài liệu theo cấu trúc cây
20
3. Làm việc với document - DOM
Cấu trúc cây của tài liệu
21
3. Làm việc với document - DOM
22
3. Làm việc với document - DOM
• getElementById(“id1”): trả về node có giá trị thuộc
tính id = id1
• Ví dụ:
// 
// some text
// 
var node = document.getElementById(“id1”);
var nodeName = node.nodeName; // p
var nodeType = node.nodeType; // 1 
var nodeValue = node.nodeValue; // null
var text = node.innerText; // some text
23
3. Làm việc với document - DOM
• getElementsByName(name1): trả về danh sách node 
có giá trị của thuộc tính name = name1
• Ví dụ:
var nodeList=document.getElementsByName(“name1”);
for(var i=0;i<nodeList.length;++i)
{
var nodeName= nodeList(i).nodeName;
var nodeType=nodeList(i).nodeType;
var nodeValue=nodeList.item(i).nodeValue;
}
Đối tượng Document - DOM
• getElementsByTagName (tagName)
Trả về danh sách node có NodeName = 
tagName
Ví dụ:
var nodeList= document.getElementsByTagName(“img”);
for(var i=0;i<nodeList.length;++i)
{
var nodeName = nodeList(i).nodeName;
var nodeType = nodeList(i).nodeType;
var nodeValue = nodeList.item(i).nodeValue;
}
25
3. Làm việc với document - DOM
• createElement(nodeName): tạo ra một node 
HTML mới tùy theo đối số nodeName
• Ví dụ:
var imgNode=document.createElement(“img”);
imgNode.src=“images/test.gif”;
//
26
3. Làm việc với document - DOM
• createTextNode(content): tạo ra một textnode 
mới với nội dung tùy theo đối số content
• Ví dụ:
var txtNode=document.createTextNode(“New text”);
var pNode=document.createElement(“p”);
pNode.appendChild(txtNode);
// New text 
27
3. Làm việc với document - DOM
• nodeName.appendChild(newNode): thêm 
node mới newNode vào cuối danh sách các 
node con của một node.
• Ví dụ:
// Some text 
var pNode=document.getElementById(“id1”);
var imgNode=document.createElement(“img”);
imgNode.src=“images/test.gif”;
pNode.appendChild(imgNode);
// 
// Some text 
//
28
3. Làm việc với document - DOM
• nodeName.insertBefore(newNode,childRef): 
chèn newNode vào trước childRef trong danh 
sách các node con của một node.
// 
//-----------------------------------------------------------------------
var pNode=document.getElementById(“id1”);
var firstChild=pNode.firstChild;
var newNode=document.createTextNode(“Some text”);
pNode.insertBefore(newNode,firstChild);
//-----------------------------------------------------------------------
// 
// Some text 
//
29
3. Làm việc với document - DOM
• nodeName.removeChild(child): xóa child
trong danh sách các node con của một node 
gọi phương thức, trả về node bị xóa.
// Hình ảnh
//-----------------------------------------------------------------------
var pNode=document.getElementById(“id1”);
if (pNode.hasChildNodes())
var rmNode=pNode.removeChild(pNode.lastChild);
//-----------------------------------------------------------------------
// 
// 
//
30
3. Làm việc với document - DOM
• replaceChild ( newChild, oldChild )
Thay thế node oldChild bằng node 
newChild trong danh sách các node con của 
node hiện hành
Ví dụ:
var replace = document.getElementById(“isReplaced”);
if (replace) 
{ 
var newNode = document.createElement("strong");
var newText = 
document.createTextNode("strongelement");
newNode.appendChild(newText);
replace.parentNode.replaceChild(newNode,replace); 
} 
31
3. Làm việc với document - DOM
• innerHTML
Chỉ định nội dung HTML bên trong một 
node.
Ví dụ:
//some text
var theElement = document.getElementById("para1");
theElement.innerHTML = “Some new text”;
// Kết quả :
// Some new text 
32
3. Làm việc với document - DOM
• innerText
Tương tự innerHTML, tuy nhiên bất kỳ nội 
dùng nào đưa vào cũng được xem như là 
text hơn là các thẻ HTML.
Ví dụ:
var theElement = document.getElementById("para1");
theElement.innerText = “Some new text”;
// Kết quả hiển thị trên trình duyệt 
// bên trong thẻ p: “Some new text” 
33
3. Làm việc với document - DOM
• setAttribute ( attributeName , value )
Chỉ định attribute của một node với giá trị là 
value.
Ví dụ:
Some text
var fontNode = document.getElementById(“font1”);
fontNode.setAttribute(“color”,”red”);
fontNode.setAttribute(“size”,”5”);
Some text
34
3. Làm việc với document - DOM
• getAttribute ( attributeName )
Lấy giá trị của một attribute trong node
Ví dụ:
var font1 = document.getElementById(“font1”);
alert(font1.getAttribute(“color”));
 removeAttribute ( attributeName )
Hủy một attribute trong node
Ví dụ:
font1.removeAttribute(“color”);
font1.removeAttribute(“size”);
35
3. Làm việc với document - DOM
• Thay đổi định dạng CSS của một node 
thông qua thuộc tính style
Ví dụ:
This is a text
var node = 
document.getElementById(“myParagraph”);
node.style.color = "green";
node.style.fontSize = "14";
node.style.backgroundColor = "yellow";
36
3. Làm việc với document - DOM
• Thay đổi định dạng css thông qua thuộc tính 
className
Ví dụ:
.look1 { color: black; background-color: yellow; 
font-style: normal; }
.look2 { background-color: orange; font-style: 
italic; }
this is my text 
var pNode = document.getElementById("p1");
pNode.className = "look2";
37
3. Làm việc với document - DOM
• Thay đổi tham chiếu đến file CSS
Ví dụ:
function changeSkin()
{
document.getElementById("myStyle").href = 
"css/style2.css";
}
<link id="myStyle" rel="stylesheet" 
type="text/css" href="css/style1.css" />
Hello world
<input type="button" onclick="changeSkin()" 
value="change skin" />
38
4. Xử lý sự kiện
1. Event Object
2. Event Handle
3. Xử lý sự kiện
39
4.1. Event Object
• Events là các sự kiện xảy ra trên trang
Web
• Do người dùng hoặc do hệ thống tạo ra
• Mỗi sự kiện sẽ liên quan đến một event
object
• Event cung cấp các thông tin
– Loại event
– Vị trí con trỏ tại thời điềm xảy ra sự kiện
• Ví dụ: Xem Slide sau
40
4.1. Event Object
41
4.2. Event Handle
• Giúp cho người lập trình bắt và xử lý các sự 
kiện của các đối tượng trong trang web.
• Cú pháp
• Ví dụ:
<INPUT TYPE=“button” NAME=“docode” 
onclick="DoOnClick();”>
<INPUT TYPE="button” NAME=“Button1”
VALUE="Open Sesame!”
onClick=”window.open('mydoc.html','newWin')”>
42
4.2. Event Handle
event event
onabort onload
onblur onmousedown
onchange onmousemove
onclick onmouseout
onerror onmouseover
onfocus onmouseup
onkeydown onreset
onkeyup onresize
onselect onsubmit
onunload
43
4.3. Xử lý sự kiện
• Cú pháp
<TAG eventHandler= "JavaScript 
Code">
• Ví dụ:
<INPUT TYPE="button” NAME="Button1” 
VALUE="OpenSesame!”
onClick="window.open('mydoc.html','newWin');">
• Lưu ý: Dấu “” và ‘’
44
4.3. Xử lý sự kiện
Ví dụ
45
4.3. Xử lý sự kiện
46
5. Một số ví dụ
function compute(frm)
{
var x = frm.expr.value;
result.innerHTML= x*x;
}
X = 
X * X = 
47
5. Một số ví dụ
48
5. Một số ví dụ
• Ví dụ: onFocus – onBlur
• Xảy ra khi một thành phần HTML bị focus 
(onFocus) và mất focus (onBlur)
• Ví dụ:
<INPUT type=“text” name=“myTextbox” 
onblur=“document.bgColor=‘aqua’;” 
onfocus=“document.bgColor=‘dimgray’;” >
49
5. Một số ví dụ
Ví dụ: Dynamic Table
• Viết trang web cho phép tạo table có số 
dòng, số cột do người dùng nhập vào.
Ví dụ: Dynamic Table
 12 
 13 
 21 
 22 
Table
Tr
Tr
Td
Td
Td
Td
body
Ví dụ:
 12 
 13 
 21 
 22 
Table
Tr
Tr
Td
Td
Td
Td
TBody
body
Ví dụ: Dynamic Table
• Document.createElement() :Tạo một đối 
tượng thẻ DOM HTML
• Object.appendChild(): Thêm một đối tượng 
thẻ DOM HTML như là nút con.
Ví dụ: Dynamic Table
function CreateTable(divTable)
{ 
var tagTable = document.createElement("table");
tagTable.border = 1;
var tagTBody = document.createElement("tbody");
tagTable.appendChild(tagTBody);
var nDong = txtSoDong.value;
var nCot = txtSoCot.value;
for (i=0; i<nDong; i++)
{
var tagTR = document.createElement("tr");
for (j=0; j<nCot; j++)
{
var tagTD = document.createElement("td");
var textNode = document.createTextNode(i+""+j);
tagTD.appendChild(textNode);
tagTR.appendChild(tagTD);
}
tagTBody.appendChild(tagTR);
}
divTable.appendChild(tagTable);
}
Tham khảo
• Website W3school
• Slide lập trình Web, ĐH KHTN, 2007
55