Bài giảng Ngôn ngữ HTML - Bài 08: Mô hình tài liệu HTML

Nội dung text: Bài giảng Ngôn ngữ HTML - Bài 08: Mô hình tài liệu HTML

1. Lê Quang Lợi
2. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
3. 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: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
4. 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 Mô hình DOM Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
5. 8.1 Giới thiệu mô hìn tài liệu (DOM) Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
6. 8.2 Các thuộc tính cơ bản Node 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 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
7. 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 Ý 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ổ Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
8. 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: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
9. 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: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
10. 8.5 Các đối tượng trong domcument 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], Mở một trang mới [features], [replace]) prompt(msg, [input]) Nhận dữ liệu từ một input alert(msg) Đưa một thông báo Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
11. 8.5 Các đối tượng trong domcument - Đố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 đó Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
12. Bài 08: Kiểm tra 45’ Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY