Bài giảng Lập trình ứng dụng mạng - HTML DOM - Nguyễn Hồ Minh Đức

HTML DOM -
HTML Document Object Model 
MSc. nguyenhominhduc
Giới thiệu
 HTML DOM định nghĩa chuẩn truy cập và xử lý các tài 
liệu HTML
 HTML DOM là :
 Một mô hình đối tượng chuẩn cho HTML
 Một giao diện lập trình cho HTML
 Độc lập với ngôn ngữ và platform
• HTML DOM định nghĩa các đối tượng và các thuộc tính của tất 
cả các thành phần và phương thức (giao diện) để truy cập chúng
• Cách khác: là một chuẩn cho cách nhận, thay đổi, xóa, thêm 
các thành phần HTML
• Trong DOM, mọi thứ trong tài liệu HTML đều được xem 
là một node
– Toàn bộ tài liệu HTML là document node
– Mỗi thẻ HTML là element node
– Văn bản trong các thành phần gọi là text node
– Các thuộc tính của thẻ gọi là attribute node
Ví dụ DOM
 DOM Tutorial 
 DOM Lesson one 
 Hello world! 
 Node gốc trong tài liệu trên là 
 Node có 2 node con là: và 
 Trong có node con là : 
 Node chứa text node có giá trị là DOM Tutorial
Document Tree
HTML DOM: thuộc tính & phương thức
 Mô hình DOM được xem như là tập các đối tượng 
node
 Các đối tượng này có thể truy xuất bằng Javascript 
hoặc các ngôn ngữ lập trình khác
 Một số thuộc tính cơ bản của đối tượng DOM
 * x.innerHTML - the inner text value of x (a HTML element)
 * x.nodeName - the name of x
 * x.nodeValue - the value of x
 * x.parentNode - the parent node of x
 * x.childNodes - the child nodes of x
 * x.attributes - the attributes nodes of x
HTML DOM: thuộc tính & phương thức
 Các phương thức của đối tượng DOM
 * x.getElementById(id) - get the element with a 
specified id
 * x.getElementsByTagName(name) - get all elements 
with a specified tag name
 * x.appendChild(node) - insert a child node to x
 * x.removeChild(node) - remove a child node from x
 Sử dụng phương thức, thuộc tính ==> truy cập, thay đổi 
node, thuộc tính node 
 Ví dụ:
Hello World!
document.getElementById("p1").innerHTML="New text!";
HTML DOM: Sự kiện
 Ví dụ:
 * chuột nhấn
 * Một trang web hoặc hình ảnh được tải
 * Chuột di chuyển qua một điểm nào đó trên trang 
web
 * submit form
 * nhấn bàn phím
 * ...
HTML DOM: Sự kiện
 onload, onUnload
 onFocus, onBlur ,onChange
 onMouseOver ,onMouseOut
 <a href=""
 onmouseover="alert('An onMouseOver event');return false">
ĐỐI TƯỢNG JAVASCRIPT VÀ DOM
Xem bản phụ lục đính kèm bài giảng để nắm rõ 
hơn các thuộc tính, phương thức, sự kiện của 
từng đối tượng
ĐỐI TƯỢNG JAVASCRIPT VÀ DOM
− Ở mức trên cùng là đối tượng window biểu thị cho khung 
hay cửa sổ của trình duyệt, các phần tử còn lại là đối 
tượng con của window
− Để truy xuất đến một đối tượng trong trình duyệt và thay 
đổi dữ liệu cho chính phần tử đó dùng thuộc tính ID , mỗi 
đối tượng trên trang đều có một ID duy nhất.
- Muốn truy cập vào 1 đối tượng thì phải truy cập vào đối 
tượng chứa nó trước, dùng dấu chấm (.) để phân cách 
giữa các đối tượng. Tuy nhiên ta có thể bỏ qua đối tượng 
window nếu đang thao tác trên cửa sổ hiện hành
Ví dụ: window.location
Cách xây dựng một đối tượng mới: Gồm 2 bước
a) Bước 1: Định nghĩa đối tượng bằng cách xây dựng hàm 
cho đối tượng đó gồm các phương thức và thuộc tính cho 
đối tượng đó.
function Object(List Parameter)
{
this.property1= Parameter1;
this.property2= Parameter2;
this.method1=functionName1;
this.method2=functionName2;
}
Xây dựng một đối tượng mới 
Trong đó 
− Từ khoá this để tham chiếu đến đối tượng đang được tạo. 
− Câu lệnh this.property1= Parameter1: gán giá trị 
Parameter1 cho thuộc tính property1
− Tương tự: muốn xâydựng phương thức cho đối tượng thì 
gán phương thức cho hàm đã định nghĩa sẵn
this.method1=FunctionName1;
a) Bước 2: Tạo instance cho đối tượng, 
var obj=new Object();
 Truy cập hoặc thay đổi g/ trị của thuộc tính:
obj.property
 Sử dụng phương thức :
obj.method()
CÁC ĐỐI TƯỢNG CÓ SẲN TRONG JAVASRIPT
1. Đối tượng Array(): Dùng để lưu trữ nhiều giá 
trị với cùng một tên gọi. Trong Javascript đối 
tượng mảng có thể chứa các thành phần mang 
kiểu giá trị khác nhau. Một mảng có n phần tử 
được đánh chỉ số từ 0 đến n-1.
− Mỗi phần tử mảng được phân biệt nhau qua chỉ 
số, dựa vào chỉ số này ta có thể truy cập hoặc 
thay đổi giá trị của từng phần tử trong mảng 
a) Khởi tạo một mảng:
Dùng từ khóa new để khởi tạo một mảng 
var Variable = new Array(size)
Ví dụ1: 
var arr= new Array()
arr[0]= "thu hai";
arr[1]= "Thu ba";
arr[2]= "Thu tu";
arr[3]= "Thu nam";
arr[4]= "Thu sau";
arr[5]= "Thu bay";
for(i=0; i<=5;i++)
document.write(arr[i]+ "")
Ví dụ 2:
var famname = new Array("Jan 
Egil","Tove","Hege","Stale","Kai Jim","Borge")
for (i=0; i<famname.length; i++)
{
 document.write(famname[i] + "")
}
Thuộc tính và phương thức của Array:
length: số phần tử của mảng
concat() : trả về một mảng các phần tử được nhập từ 2 
mảng lại
join(): trả về chuỗi bao gồm tất cả các phần tử của mảng
reverse() : trả về một mảng các phần tử theo thứ tự ngược
slice(begin [,end]) Trả về một mảng các phần tử bắt đầu 
từ phần tử thứ begin đến end
sort([compareFunction]) Trả về một mảng được sắp xếp 
theo hàm so sánh compareFunction. Nếu không có hàm 
này thì mảng sẽ được sắp xếp theo thứ tự từ điển
Đối tượng Date() : Cung cấp thông tin về ngày, 
giờ trên môi trường client. Dùng thiết lập ngày 
tháng năm và giờ hiện hành trên trang web. 
Cách khai báo: Có 2 cách khai báo
Cách 1: Khai báo và khởi tạo
var variableName= new Date(“month, day, year, hours : 
minutes : seconds”)
hoặc:
var variableName= 
new Date(year,month,day,hours,minutes,second)
hoặc:
var variableName= new Date(year,month, day)
var variableName= new Date("Month, dd, yyyy 
hh:mm:ss")
var variableName= new Date("Month, dd, yyyy")
var variableName= new Date(yy,mm,dd,hh,mm,ss)
var variableName= new Date(yy,mm,dd)
var variableName= new Date(milliseconds)
variableName là bi n dùng đ l u tr thông tin ngày tháng ế ể ư ữ
năm, gi phút giây.ờ
Cách 2: Khai báo ngày hiện hành 
var variableName=new Date()
Trong trường hợp này giá trị trả về là ngày tháng 
năm giờ phút giây hiện hành của hệ thống.
Các phương thức của đối tượng Date():
Để truy xuất phương thức của đối tượng dùng cú pháp
variableName.Method()
Phương thức Mô tả 
Date() trả về đối tượng date
getDate() Trả về giá trị ngày ( số nguyên từ 1-31) trong tháng 
getDay() Trả về giá trị ngày trong tuần ( số nguyên từ 0-6 Sunday=0) 
getMonth() Trả về tháng trong năm (from 0-11. 0=January, 1=February)
getFullYear() Trả về giá trị năm (bốn số )
getYear() Trả về giá trị năm (hai số )
getHours() Trả về giờ của hệ thống (từ 0-23)
getMinutes() Trả về phút của hệ thống (từ 0-59)
getSeconds() Trả về giây của hệ thống (từ 0-59)
getMilliseconds() Trả về giá trị millisecond from 0-999)
setFullYear() Thiết lập lại năm cho ngày hệ thống ( 4 số)
setHours() Thiết lập lại giờ cho hệ thống ( từ 0-24)
setMinutes() Thiết lập lại phút cho hệ thống ( từ 0-59)
setMonth() Thiết lập lại tháng cho hệ thống ( từ 0-11)
setSeconds() Thiết lập lại giây cho hệ thống (from 0-59)
Ví dụ:
d.setFullYear(2008)
document.write(d.getFullYear()+"")
Ví dụ:
function Ngay()
{
var day=new Date();
var w,m,d,y;
var arrday=new Array();
arrday[0]= “chu nhat”;
arrday[1]= “Thu hai ”;
arrday[2]= “Thu ba ”;
arrday[3]= “Thu tu”;
arrday[4]= “Thu nam ”;
arrday[5]= “Thu sau”;
arrday[6]= “Thu Bay”;
w=day.getDay(); d=day.getDate();
m=day.getMonth()+1; y=day.getFullYear();
document.write(“Hom nay:”+arrday[w]+” ngay “+d+” thang “+m+ “ 
nam “ +y); }
Ngay()//g i hàmọ
1. Đối tượng String() 
Mỗi chuỗi trong JavaScript là một đối tượng, 
gồm các thuộc tính và phương thức thực hiện 
trên chuỗi, đó là các phương thức tìm kiếm 
chuỗi, trích chuỗi con và áp dụng các thẻ HTML 
vào nội dung của chuỗi.
a) Cách khai báo đối tượng String
var stringVariable=new String()
Ví dụ:
var st=new Student()
a) Thuộc tính của Srting():
 Length: dùng để xác định chiều dài của chuổi. Các ký tự 
trong chuổi được đánh chỉ số từ 0 đến Length-1. 
− Cách tham chiếu đến thuộc tính length của đối tựơng String(): 
 StringLength=stringVariable.length
 StringLength=”This is a string”.length
b) Các phương thức của String:Các phương thức 
của String để thực hiện các thao tác trên nội dung 
của chuỗi:
Phương thức Mô tả Ví dụ
anchor("name") Tham số name là thuộc tính NAME của 
tag .
str.anchor(“name”)
big() Trả về một chuỗi đặt trong cặp thẻ str.big()
bold() Trả về một chuỗi in đậm str.bold()
charAt(index) Trả về ký tự thứ index trong chuỗi. index 
từ 0 đến str.length-1
str.charAt(0)
concat() Nối chuổi
fontcolor() Trả về một chuỗi với màu đã được xác 
lập.
str.fontcolor(“red”)
fontsize() kích thước font str.fontsize(“5”)
indexOf(“str”,
[fromindex])
Trả về vị trí của đầu tiên được tìm thấy của chuỗi “str” bắt đầu tìm 
từ vị trí fromindex. Nếu không có fromindex thì tìm từ vị trí 0. Nếu 
không tìm thấy thì hàm trả về giá trị -1
italics() Trả về một chuỗi in nghiêng
lastIndexOf(“str”) Trả về vị trí cuối cùng được tìm thấy chuỗi “str”, tìm từ trái qua phải 
. Nếu không tìm thấy thì hàm trả về giá trị -1
link() Trả về một chuỗi liên kết
match() Tương tự như hàm indexOf và lastindexOf, nhưng phương thức 
này trả về một chuỗi cụ thể nếu không tìm thấy thì trả về giá trị 
"null".
replace() Thay thế một chuỗi bằng một chuỗi mới
search(‘str’) Trả về giá trị là vị trí chuỗi con được tìm thấy 
trong chuỗi cha, nếu không tìm thấy thì trả về 
giá trị -1
slice(index) Trả về một chuỗi con được cắt từ chuỗi mẹ tại 
vị trí index
small() Trả về một chuỗi có kích thước nhỏ hơn
strike() Trả về một chuỗi được gạnh ngang qua thân 
chuỗi
sub() Trả về một chuỗi kiểu subscript Str.sub()
substr(start,length) Trả về chuỗi con bắt đầu từ vị trí start và 
có chiều dài length. nếu không có start 
xem như start=0
Str.substr(0,2)=”Th”
substring(Start,end) Tách ra một chuỗi con từ một chuỗi. Bắt 
đầu từ chỉ số start đến end.
Nếu Start<end, chuỗi trả về từ start đến 
end-1
Nếu end<start, chuỗi trả về từ end đến 
start
Nếu start=end chuỗi trả về là null.
sup() Trả về chuỗi kiểu superscript
toLowerCase() Chuyển chuỗi thành chữ thường
toUpperCase() Chuyển chuỗi thành chữ hoa
Ví dụ: 
var str=“Tr ng Đ i H c Tôn Đ c Th ng"ườ ạ ọ ứ ắ
document.write("" + str + "")
document.write(“Chieu dai cua chuoi la : “+ 
str.length)
Ví dụ Phương thức indexOf. 
var str="This is my Schools "
var pos=str.indexOf("School")
if (pos>=0)
{
document.write("School found at position: ")
document.write(pos + "")
}
else
{
document.write("School not found!")
}
Ví dụ:
var st=new String()
st="KHOA CONG NGHE THONG TIN"
document.write(st.lastIndexOf("N")+"")
document.write(st.link()+"")
document.write(st.match(“THONG TIN”)+"")
document.write(st.replace("KHOACONGNGHETHONG
TIN","KHOA CNTT")+"")
Đối tượng Math()
Đối tượng Math() cung cấp các hàm và các 
phương thức cần thiết để thực hiện các phép 
toán số học. Không cần phải tạo đối tượng 
Math() mà chúng ta có thể sử dụng trực tiếp đối 
tượng này
a) Các phương thức của Math():
Cú pháp chung:
Math.method([value])
Phương thức Mô tả
abs(x) Trả về giá trị tuyệt đối của biến x 
acos(x) Trả về giá trị arccosine của x
ceil(x) Trả về số nguyên lớn hơn hoặc bằng x 
floor(x) Trả về số nguyên nhỏ hơn hoặc bằng x 
log(x) Trả về giá trị log của x 
max(x,y) Trả về giá trị lớn nhất trong hai số x và y
min(x,y) Trả về giá trị nhỏ nhất trong hai số x và y
pow(x,y) Trả về giá trị x lũy thừa y
random() Trả về giá trị một số ngẫu nhiên từ 0 đến 1 
round(x) Làm tròn số x 
sqrt(x) Trả về giá trị căn bậc 2 của x 
Ví dụ:
 var n= -136.8 , m=136.8
document.write("abs(-136.8) = " + Math.abs(n) +"")
document.write("ceil(136.8) = " + Math.ceil(m) +"")
document.write("floor (136.8) = " + Math.floor(m) +"")
document.write("pow (2,3) = "+ Math.pow(2,3)+"")
document.write("Mot so ngau nhien <=5 : " + Math.random()*5 
+"")
Ví dụ:
Viết chương trình tạo một nút đổi hình (play) và nút stop để ngưng 
var idq;
function play()
{
var arrhinh= new Array();
arrhinh[0]= "../images/h1.jpg";
arrhinh[1]= "../images/h2.jpg";
arrhinh[2]= "../images/h3.jpg";
arrhinh[3]= "../images/h4.jpg";
arrhinh[4]= "../images/h5.jpg";
arrhinh[5]= "../images/h6.jpg";
var i=Math.round(Math.random()*4)
idhinh.src=arrhinh[i];
idq=setTimeout(“play()”,1000);
}
function stop()
{
clearTimeout(idq);
}
1. Đối tượng document:
Đối tượng document cung cấp các thuộc tính và 
phương thức để làm việc với toàn bộ tài liệu 
hiện hành gồm: form, liên kết, hình ảnh, tiêu đề, 
vị trí hiện hành, màu hiện hành
Đối tượng document được định nghĩa khi tag 
body được xử lý trong trang HTML và nó vẫn 
tồn tại nếu trang được nạp. Các thuộc tính của 
document phản ánh thuộc tính của tag body. 
Trong body có 2 sự kiện OnLoad và Unload 
a) Các thuộc tính của đối tượng document 
Thuộc tính Mô tả
alinkcolor Thiết lập hoặc trả về giá trị màu của liên kết đang xem của tài liệu 
bgcolor Thiết lập hoặc trả về giá trị màu nền của tài liệu 
cookie Chứa giá trị các cookies dành cho tài liệu hiện hành 
domain Trả về giá trị tên miền máy chủ chứa document 
fgcolor Thiết lập hoặc trả về giá trị màu chữ của tài liệu 
lastmodified Trả về giá trị ngày giờ cuối cùng mà tài liệu được cập nhật
linkcolor Thiết lập hoặc trả về giá trị màu của liên kết trong tài liệu 
location mở một trang web mới
referrer Returns the URL of the document that loaded the current document
title Trả về giá trị của tựa đề của tài liệu 
url Trả về đường dẫn củ tài liệu hiện hành 
vlinkcolor Thiết lập hoặc trả về giá trị màu của liên kết đã xem của tài liệu 
Phương thức Mô tả
clear() Xóa tài liệu 
close() Đóng một tài liệu
focus() Đưa trỏ về một đối tượng trong trang
open([“mimetype”]) Mở một stream để thu thập dữ liệu của các phương 
thức write và writeln.
write("str") viết một chuỗi vào một tài liệu
writeln("str") viết một chuỗi vào một tài liệu và xuống dòng
a) Phương thức của đối tượng document 
a) Sự kiện tác động đối tượng document 
Cú pháp:
 document.event_name="someJavaScriptCode" 
− OnBlur
− OnClick
− OnDblClick
− OnFocus
− OnKeyDown
− OnKeyPress
− OnKeyUp
− OnMouseDown
− OnMouseMove
− OnMouseOut
− OnMouseOver
− OnMouseUp
− OnMouseUp
1. Đối tượng trình duyệt (Navigator Object)
Đối tượng trình duyệt chứa đựng những thông tin về trình 
duyệt web của client.
Thuộc tính Mô tả
appName Tên trình duyệt
appVersion Phiên bản trình duyệt
cookieEnabled
platform Nền của hệ điều hành
appCodeName Xác định tên nội tại của trình duyệt (Atlas). 
Ví dụ:
 Navigator Object Exemple 
document.write("appCodeName = "+navigator.appCodeName + 
"");
document.write("appName = "+navigator.appName + "");
document.write("appVersion = "+navigator.appVersion + "");
document.write("userAgent = "+navigator.userAgent + "");
1. Đối tượng Window 
Là đối tượng cao nhất trong mô hình DOM, là nơi chứa tất cả 
các thành phần của trang web. 
a) Các thuộc tính của Windows:
Thuộc tính Mô tả Giá trị
defaultStatus thiết lập chuổi t/báo trên thanh trạng thái Text
status thiết lập thông báo tại thời điểm hiện hành Text
location Xác định vị trí trang hiện tại trong cửa sổ URL
history Xác định các phần tử trong history
alwaysLowered hiển thị cửa sổ bên dưới các của sổ khác Yes/no
alwaysRaised hiển thị cửa sổ trên tất cả các cửa sổ khác Yes/no
Dependent Cửa sổ này sẽ đóng khi cửa sổ cha bị đóng Yes/no
directories Hiển thị Button thư mục Yes/no
fullscreen hiển thị chế độ đầy màn hình Yes/no
height thiết lập chiều cao của cửa sổ số nguyên
hotkeys Cho phép dùng phím nóng Yes/no
left Thiết lập k/cách từ text đến cạnh cửa sổ số nguyên
location hiển thị hộp location Yes/no
menubar hiển thị thanh menu bar Yes/no
resizable Cho phép thay đổi kích thước cửa sổ Yes/no
scrolbars xuất hiện /không xuất hiện thanh cuộn Yes/no
status Hiển thị thanh trạng thái Yes/no
titlebar hiển thị thanh tiêu đề Yes/no
toolbar hiển thị thanh công cụ Yes/no
width Xác định độ rộng của cửa sổ số nguyên
closed trả về giá trị true, false. True khi cửa sổ đóng true, false
Ví dụ:
window.defaultStatus=”String”
window.status=”String”
window.location=”URL”
Ta cũng có thể mở một trang web mới bằng lệnh:
window.location.href=”URL”
Phương Thức Mô tả
alert("msg") Hiển Thị hộp thọai thông báo 
blur() Di chuyển con trỏ đến cửa sổ hiện hành 
clearinterval(ID) Hủy thời gian đã thiết lập bằng setinterval()
clearTimeout(ID) Hủy thời gian đã thiết lập bằng setTimeout()
close() Đóng cửa sổ hiện hành 
confirm("msg") Hiển thị hộp thọai xác nhận với hai nút Cancel và OK 
focus() Đưa con trỏ về cửa sổ hiệnhành 
MoveBy(x,y) Di chuyển cửa sổ đến một vị trí mới một đọan pixel so với cửa 
sổ hiện hành 
MoveTo(x,y) Di chuyển cửa sổ qua trái và lên trên một đọan pixel cụ thể so 
với cửa sổ hiện hành.
open(URL,"windowname","FeatureLi
st")
URL : đc trang web nạp vào cửa sổ.
WindowName: là tên cửa sổ .
FeatureList : danh sách các thuộc tính của cửa sổ: 
toolbars, menu, status .
print() in nội dung trong cửa sổ hiện hành. 
prompt("msg","reply") Hiển thị hộp thoại nhập liệu 
setTimeout(func,millisec) Thiết lập thời gian mili giây để gọi 1 hàm 
stop() Hủy việc download một cửa sổ. Tương tự như việc đóng 
một cửa sổ trình duyệt.
resizeBy(dx,dy) Thay đổi kích thước cửa sổ sang phải dx, dưới dy pixel
resizeTo(x,y) Thay đổi kích thước x, y pixel
scrollBy(dx,dy) cuộn nội dung sang phải dx, xuống dưới dy pixel
scrollTo(x,y) cuộn nội dung trên trang đốn vị trí x,y
Ví dụ: Objwindow.close() 
 Từ khoá self: trong trường hợp muốn thao tác 
trên cửa sổ hiện hành ta dùng từ khoá self thay 
thế cho đối tượng window
Ví dụ : đóng cửa sổ hiện hành:
self.close() ho c window.close()ặ
Ví dụ: Đoạn Script đóng, mở cửa sổ trình duyệt
<INPUT TYPE="button" VALUE="Open New Window" 
onClick="NewWin=window.open('blank1.htm','NewWin',
'toolbar=no,status=no,width=200,height=100'); ">
<INPUT TYPE="button" VALUE="Close New Window"
onClick="NewWin.close();" >
<INPUT TYPE="button" VALUE="Close Main Window"
onClick="window.close();">