Đang tải... (xem toàn văn)
• 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,[r]
(1)HTML DOM
-HTML Document Object Model
(2)Giới thiệu
HTML DOM định nghĩa chuẩn truy cập xử lý tài liệu HTML
HTML DOM :
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ữ platform
• HTML DOM định nghĩa đối tượng thuộc tính tất thành phần phương thức (giao diện) để truy cập chúng
• Cách khác: chuẩn cho cách nhận, thay đổi, xóa, thêm
(3)• Trong DOM, thứ tài liệu HTML xem
là node
– Toàn tài liệu HTML document node – Mỗi thẻ HTML element node
(4)Ví dụ DOM
<html> <head>
<title>DOM Tutorial</title> </head>
<body>
<h1>DOM Lesson one</h1> <p>Hello world!</p>
</body> </html>
Node gốc tài liệu <html>
Node <html> có node là: <head> <body> Trong <head> có node : <title>
(5)(6)HTML DOM: thuộc tính & phương thức
Mơ hình DOM xem tập đối tượng node
Các đối tượng truy xuất Javascript hoặc ngơn ngữ lập trình khác
Một số thuộc tính đố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
(7)HTML DOM: thuộc tính & phương thức
Các phương thức đố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
(8) Ví dụ:
<html> <body>
<p id="p1">Hello World!</p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="New text!"; </script>
(9)HTML DOM: Sự kiện
Ví dụ:
* chuột nhấn
* Một trang web hình ảnh tải
* Chuột di chuyển qua điểm trang web
* submit form
(10)HTML DOM: Sự kiện
onload, onUnload
onFocus, onBlur ,onChange
<input type="text" size="30" id="email" onchange="checkEmail()"> onMouseOver ,onMouseOut
<a href="http://www.abc.com"
onmouseover="alert('An onMouseOver event');return false">
(11)ĐỐI TƯỢNG JAVASCRIPT VÀ DOM
(12)ĐỐI TƯỢNG JAVASCRIPT VÀ DOM
− Ở mức đối tượng window biểu thị cho khung
hay cửa sổ trình duyệt, phần tử cịn lại đối tượng window
− Để truy xuất đến đối tượng trình duyệt thay
đổi liệu cho phần tử dùng thuộc tính ID , đối tượng trang có ID
- Muốn truy cập vào đối tượng phải truy cập vào đối tượng chứa trước, dùng dấu chấm (.) để phân cách đối tượng Tuy nhiên ta bỏ qua đối tượng window thao tác cửa sổ hành
(13)Cách xây dựng đối tượng mới: Gồm bước
a) Bước 1: Định nghĩa đối tượng cách xây dựng hàm
cho đối tượng gồm phương thức thuộc tính cho đối tượng
function Object(List Parameter) {
this.property1= Parameter1; this.property2= Parameter2; …
this.method1=functionName1; this.method2=functionName2; …
}
(14)Trong
− Từ khố this để tham chiếu đến đối tượng 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
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 thay đổi g/ trị thuộc tính:
obj.property
Sử dụng phương thức :
(15)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 tên gọi Trong Javascript đối
tượng mảng chứa thành phần mang kiểu giá trị khác Một mảng có n phần tử được đánh số từ đến n-1.
− Mỗi phần tử mảng phân biệt qua
số, dựa vào số ta truy cập thay đổi giá trị phần tử mảng
a) Khởi tạo mảng:
Dùng từ khóa new để khởi tạo mảng
(16)Ví dụ1:
<script>
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++)
(17)Ví dụ 2:
<script type="text/javascript">
var famname = new Array("Jan
Egil","Tove","Hege","Stale","Kai Jim","Borge")
for (i=0; i<famname.length; i++) {
document.write(famname[i] + "<br>") }
(18)Thuộc tính phương thức Array:
length: số phần tử mảng
concat() : trả mảng phần tử nhập từ mảng lại
join(): trả chuỗi bao gồm tất phần tử mảng
reverse() : trả mảng phần tử theo thứ tự ngược
slice(begin [,end]) Trả mảng phần tử bắt đầu từ phần tử thứ begin đến end
(19)Đối tượng Date() : Cung cấp thông tin ngày, giờ môi trường client Dùng thiết lập ngày tháng năm hành trang web
Cách khai báo: Có cách khai báo
Cách 1: Khai báo khởi tạo
var variableName= new Date(“month, day, year, hours : minutes : seconds”)
hoặc:
var variableName=
(20)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 bi n dùng đ l u tr thông tin ngày tháng ế ể ữ