HTML - Bài 08: Mô hình tài liệu HTML

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