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.

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

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

- 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)

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

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

Đố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

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

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

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

open(URL, [name],

[features], [replace])

Mở một trang mới

8.5 Các đối tượng trong domcument

- Đối tượng History

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’