Bài giảng HTML – DHTML - Javascript (Thiết kế Web): Bài 8 - Lê Quang Lợi
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (423.9 KB, 12 trang )
Lê Quang Lợi
Bài 08: Mơ hình tài liệu HTML
Nội dung
» Khái qt về DOM
» Tài liệu trong DOM
» Các hàm cơ bản
» Thao tác với tài liệu HTML
» Các đối tượng cơ bản trong tài liệu
Lê Quang Lợi:
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
8.1 Giới thiệu mơ hìn tài liệu (DOM)
» DOM(Document Object Model): mơ hình đối tượng dữ liệu
» Đối tượng DOM: Thể hiện cấu trúc tài liệu HTML (hình cây)
» Tài liệu HTML được đối tượng docment phân tích (tập node)
» Một thẻ HTML là một Node gồm( thuộc tính, hàm, sự kiện)
» DOM truy xuất (Thuộc tính/hàm): bởi “.”
» DOM có thể thao tác với thẻ HTML
* Tìm kiếm/liệt kê đối tượng thẻ
* Thay đổi/ thêm mới/xóa các thuộc tính thẻ HTML
» javascript sử dụng DOM tương tác với HTML qua lập trình
Lê Quang Lợi:
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
8.1 Giới thiệu mơ hìn tài liệu (DOM)
- Docement: node gốc
- Chứa toàn bộ các node con
- Chứa các hàm/ thuộc tính
- Node:
Thuộc tính,
phương thức
- Đại diện cho một thẻ HTML
Lê Quang Lợi:
HTML-DHTML-Javascript
Mơ hình DOM
CNPM-CNTT-ĐHSPKT HY
8.1 Giới thiệu mơ hìn tài liệu (DOM)
Lê Quang Lợi:
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
8.2 Các thuộc tính cơ bản Node
x.innerHTML: Tồn bộ nội dung HTML của thẻ
x.innerText : Nội dung text trong thẻ
x.nodeName: tên của thẻ
x.nodeValue : Giá trị của thẻ
x.parentNode : Node cha
x.childNodes : các node con
x.attributes : các thuộc tính của node
Lê Quang Lợi:
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
8.5 Các đối tượng trong domcument
Đối tượng Windows
» Đối tượng cửa sổ hiện tại đang mở của HTML
» Chứa đối tượng document, history của cửa sổ hiện hành
» Nhiều thuộc tính, phương thức hỗ trợ người dùng
Thuộc tính
Loaction
Name
History
Lê Quang Lợi:
Ý nghĩa
URL của trang hiện tại
Tên của cửa sổ hiện tại
Lịch sử trong cửa sổ
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
8.3 Một số hàm của document
x.getElementById(id) ; // Lấy các node theo ID của thẻ HTML
x.getElementsByTagName(name); // lấy các thẻ theo Tên thẻ
x.appendChild(node); // Thêm node vào bên trong
x.removeChild(node);// Bớt một node của node hiện có
Lê Quang Lợi:
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
8.4 Thao tác với tài liệu HTML
B01: Lấy về đối tượng HTML
» Tên Đối tượng: tenthe.thuoctinh;
» Hàm của DOM: getElementByID();
getElementByTagName();
B02: Tương tác đối tượng HTML
» Thay đổi các thuộc tính
» Lấy về giá trị thuộc tính
» Thêm mới các node ...
Lê Quang Lợi:
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
8.5 Các đối tượng trong domcument
Phương thức
Ý nghĩa
Đóng cửa sổ hiện tại
close()
focus()
home()
Chọn hoạt động cửa sổ
Về trang đầu tiên
open(URL, [name],
[features], [replace])
prompt(msg, [input])
Mở một trang mới
alert(msg)
Đưa một thông báo
Lê Quang Lợi:
Nhận dữ liệu từ một input
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
8.5 Các đối tượng trong domcument
- Đối tượng History
Trường
length
forward()
go(whereTo)
back()
Lê Quang Lợi:
Ý nghĩa
Số lượng URL
URL kế tiếp
Nhảy tới một URL
Trở lại URL trước đó
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
Bài 08: Kiểm tra 45’
Lê Quang Lợi:
HTML-DHTML-Javascript
CNPM-CNTT-ĐHSPKT HY
