Bài giảng HTML-DHTML-Javascript - Bài 08: Mô hình tài liệu HTML - Lê Quang Lợi

Lê Quang Lợi 
Bài 08: Mô hình tài liệu HTML 
Nội dung 
» Khái quát 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: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
8.1 Giới thiệu mô hìn tài liệu (DOM) 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» 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: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
- 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 
Mô hình DOM 
8.1 Giới thiệu mô hìn tài liệu (DOM) 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
8.1 Giới thiệu mô hìn tài liệu (DOM) 
8.2 Các thuộc tính cơ bản Node 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
x.innerHTML: Toà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 
8.5 Các đối tượng trong domcument 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
Đố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 Ý nghĩa 
Loaction URL của trang hiện tại 
Name Tên của cửa sổ hiện tại 
History Lịch sử trong cửa sổ 
8.3 Một số hàm của document 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
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ó 
8.4 Thao tác với tài liệu HTML 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
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: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
Phương thức Ý nghĩa 
close() Đóng cửa sổ hiện tại 
focus() Chọn hoạt động cửa sổ 
home() Về trang đầu tiên 
open(URL, [name], 
[features], [replace]) 
Mở một trang mới 
prompt(msg, [input]) Nhận dữ liệu từ một input 
alert(msg) Đưa một thông báo 
8.5 Các đối tượng trong domcument 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
- Đối tượng History 
Trường Ý nghĩa 
length Số lượng URL 
forward() URL kế tiếp 
 go(whereTo) Nhảy tới một URL 
back() Trở lại URL trước đó 
8.5 Các đối tượng trong domcument 
Bài 08: Kiểm tra 45’ 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript