Thiết kế Lập trình Web 1_HTML DOM VỚI JAVASCRIPT

Lập trình và Thiết kế Web 1

Bài 6 – Phần 2/2
HTML DOM với Javascript

Khoa CNTT – ĐH.KHTN
© 2007 Khoa Công nghệ thông tin

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Nội dung
ƒ Giới thiệu về HTML DOM
ƒ Thuộc tính (Property) và Phương thức (Method)
ƒ Xử lý sự kiện (Event)

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Nội dung
ƒ Giới thiệu về HTML DOM
ƒ Thuộc tính (Property) và Phương thức (Method)
ƒ Xử lý sự kiện (Event)

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

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 đị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

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Giới thiệu về HTML DOM - Ví dụ

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Giới thiệu về HTML DOM – Cấu trúc DOM đơn giản

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Giới thiệu về HTML DOM – Cấu trúc DOM đầy đủ

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

8

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Nội dung
ƒ Giới thiệu về HTML DOM
ƒ Thuộc tính (Property) và Phương thức (Method)
ƒ Xử lý sự kiện (Event)

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – Cú pháp chung
ƒ 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();

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – Các loại Objects

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – window Object
ƒ 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

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – window Object (tt)
Thuộc tính

Phương thức

– document

– alert

– history

– confirm

– location

– prompt

– parent

– blur

– frames[]

– focus

– name

– open

– status

– close

– event

– setTimeout

– screen

– setInterval

–…

–…
© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – location Object
•Chứa thông tin về URL hiện tại
Thuộc tính

Phương thức

– hash

– assign(url)

– host

– reload()

– hostname

– replace(url)

– href
– pathname
– port
– protocol
– search
© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – history Object
ƒ Cung cấp danh sách các URL đã được duyệt bởi người
dùng
Thuộc tính

Phương thức

– length

– back()
– go(url)
– forward()

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – navigator Object
ƒ Cung cấp thông tin về trình duyệt Browser
Thuộc tính

Phương thức

– appName

– javaEnabled()

– appVersion

–…

– appCodeName
– cookieEnabled
– online
– platform
–…

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – document Object
ƒ 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

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – document Object (tt)

Thuộc tính

Phương thức

– bgColor
– fgColor

Tập hợp

– clear()
– close()
– open(…,…)

– aLinkColor
– linkColor
– vlinkColor

– write(text)

anchors [ ]
forms [ ]
frames [ ]
images [ ]
links [ ]

– writeln(text)

– lastModified
– location
– referrer

– getElementById(“id”)
– getElementByName(“Name”)
– getElementByTagName(“tagName”)
– createTextNode(“ text ")

– title

– createElement(“HTMLtag")
– …
CuuDuongThanCong.com

© 2007 Khoa CNTT - ĐHKHTN

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – Image Object
ƒ Truy xuất đến tag <img> trên trang web
ƒ Có thể truy xuất thông qua :
– documnet.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

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – form Object
ƒ Dùng để truy xuất đến tag <form> trên trang web
ƒ Có thể truy xuất thông qua
– documnet.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( )
© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Property & Method – element Object
ƒ Tương ứng với form field.
document.formName.controlName
ƒ Ví dụ:
<form name=“searchForm” action=“cgi-bin/search.pl”>
<input type=“text” name=“entry”>
<input type=“submit” name=“sender” value=“Search”>
</form>

có thể:
document.searchForm.entry
document.searchForm.elements[0]
document.forms[“searchForm”].elements[“entry”]
document.forms[“searchForm”].entry
© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Đối tượng Document - DOM
ƒ

Biểu diễn nội dung của tài liệu theo cấu trúc cây

<html>
<head> <title>DOM Test</title> </head>
<body>

DOM Test Heading

<hr />
<!-- Just a comment -->

A paragraph of <em>text</em>
is just an example

<ul>
<li>
<a href=“” > Yahoo! </a>
</li>
</ul>
</body>
</html>
© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Đối tượng Document - DOM
ƒ

Cấu trúc cây nội dung tài liệu

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Đối tượng Document - DOM
ƒ

Các loại DOM Node chính

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>

Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript

Đối tượng Document - DOM
ƒ

getElementById ( id1 )
Trả về node có giá trị thuộc tính id = id1
Ví dụ:
//

//
some text
//

var
var
var
var

var

Text Node

node = document.getElementById(“id1”);
nodeName = node.nodeName; // p
nodeType = node.nodeType; // 1
nodeValue = node.nodeValue; // null
text
= node.innerText ; // some text

© 2007 Khoa CNTT - ĐHKHTN

CuuDuongThanCong.com

/>