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.
Lê Quang Lợi Bài 08: Mơ hình tài liệu HTML Nội dung » Khái quát DOM » Tài liệu DOM » Các hàm » Thao tác với tài liệu HTML » Các đối tượng tài liệu Lê Quang Lợi: loilequang@gmail.com 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 liệu » Đối tượng DOM: Thể cấu trúc tài liệu HTML (hình cây) » Tài liệu HTML đối tượng docment phân tích (tập node) » Một thẻ HTML Node gồm( thuộc tính, hàm, kiện) » DOM truy xuất (Thuộc tính/hàm): “.” » DOM 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 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 8.1 Giới thiệu mơ hìn tài liệu (DOM) - Docement: node gốc - Chứa toàn node - Chứa hàm/ thuộc tính - Node: Thuộc tính, phương thức - Đại diện cho thẻ HTML Lê Quang Lợi: loilequang@gmail.com 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: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 8.2 Các thuộc tính Node x.innerHTML: Toàn nội dung HTML thẻ x.innerText : Nội dung text thẻ x.nodeName: tên thẻ x.nodeValue : Giá trị thẻ x.parentNode : Node cha x.childNodes : node x.attributes : thuộc tính node Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 8.5 Các đối tượng domcument Đối tượng Windows » Đối tượng cửa sổ mở HTML » Chứa đối tượng document, history cửa sổ 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: loilequang@gmail.com Ý nghĩa URL trang Tên cửa sổ Lịch sử cửa sổ HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 8.3 Một số hàm document x.getElementById(id) ; // Lấy node theo ID thẻ HTML x.getElementsByTagName(name); // lấy thẻ theo Tên thẻ x.appendChild(node); // Thêm node vào bên x.removeChild(node);// Bớt node node có Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 8.4 Thao tác với tài liệu HTML B01: Lấy đối tượng HTML » Tên Đối tượng: tenthe.thuoctinh; » Hàm DOM: getElementByID(); getElementByTagName(); B02: Tương tác đối tượng HTML » Thay đổi thuộc tính » Lấy giá trị thuộc tính » Thêm node Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 8.5 Các đối tượng domcument Phương thức Ý nghĩa Đóng cửa sổ close() focus() home() Chọn hoạt động cửa sổ Về trang open(URL, [name], [features], [replace]) prompt(msg, [input]) Mở trang alert(msg) Đưa thông báo Lê Quang Lợi: loilequang@gmail.com Nhận liệu từ input HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 8.5 Các đối tượng domcument - Đối tượng History Trường length forward() go(whereTo) back() Lê Quang Lợi: loilequang@gmail.com Ý nghĩa Số lượng URL URL Nhảy tới 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: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY ... Lợi: loilequang@gmail.com Ý nghĩa Số lượng URL URL Nhảy tới 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: loilequang@gmail.com HTML- DHTML- Javascript. .. tính - Node: Thuộc tính, phương thức - Đại diện cho thẻ HTML Lê Quang Lợi: loilequang@gmail.com 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. .. 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 8. 1 Giới thiệu mô hìn tài liệu (DOM) - Docement: node gốc - Chứa toàn node - Chứa hàm/