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

Chia sẻ: 5A4F5AFSDG 5A4F5AFSDG | Ngày: | Loại File: PDF | Số trang:12

Thêm vào BST

Báo xấu

46
lượt xem 2
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng HTML – DHTML - Javascript (Thiết kế Web): Bài 8 - 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 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 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
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
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 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
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.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
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
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
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
Bài 08: Kiểm tra 45’ Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY