Bài giảng HTML – DHTML - Javascript (Thiết kế Web): Bài 8 - Lê Quang Lợi

Bài 8: Mô hình tài liệu HTML. Nội dung trình bày trong chương này gồm có: 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. Mời các bạn cùng tham khảo.
Nội dung trích xuất từ tài liệu:
Bài giảng HTML – DHTML - Javascript (Thiết kế Web): Bài 8 - Lê Quang LợiLê Quang LợiBài 08: Mô hình tài liệu HTMLNộ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ệuLê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY8.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ìnhLê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY8.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 DOMLê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY8.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 HY8.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 nodeLê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY8.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 HY8.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 HY8.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 HY8.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áoLê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY8.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 HYBài 08: Kiểm tra 45’Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY