Webcourse html dom

  • 61 trang
  • file .pdf
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
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
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
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
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
Lập trình và Thiết kế Web 1 – Bài 6 : DOM HTML với Javascript
© 2007 Khoa CNTT - ĐHKHTN
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
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 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
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
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
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
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
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
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
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
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
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 Tập hợp
– bgColor – clear() anchors [ ]
– fgColor forms [ ]
– close()
frames [ ]
– open(…,…) images [ ]
– aLinkColor
– linkColor – write(text) links [ ]
– vlinkColor – writeln(text)
– getElementById(“id”)
– lastModified
– getElementByName(“Name”)
– location
– referrer – getElementByTagName(“tagName”)
– createTextNode(“ text ")
– title – createElement(“HTMLtag")
– … © 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 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
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
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