DOM (Document Object Model – Mô hình hóa đối tượng tài liệu): truy xuất và thao tác trên HTML, XML bằng ngôn ngữ lập trình thông dịch như javascript, PHP, Python.
DOM coi các thuộc tính của HTML là đối tượng, cung cấp phương pháp (method) để truy cập các tính chất, thuộc tính của HTML, tạo ra các hành động (event) cho các thuộc tính đó.
Phương pháp của DOM là các hành động mà bạn có thể làm việc với các thuộc tính, tính chất HTML để thay đổi hoặc đặt giá trị nào đó. VD như bạn có thể đổi màu đoạn văn thông qua bấm nút “change”.
Quá trình chuyển đổi cấu trúc HTML thành DOM tree là parser. Cấu trúc CSS sẽ chuyển đổi thành CSS tree, quá trình DOM tree kết hợp với CSSOM tree tạo ra render tree. DOM tree: chủ yếu bao gồm 3 loại: nút gốc, nút phần tử, nút văn bản, ngoài ra còn có nút thuộc tính và nút chú thích
- Nút gốc thường là thẻ <html>
- Nút phần tử: VD như thẻ <head>, <title>, <body>, <p>, <h>, . . .
- Nút văn bản: đoạn văn bản trong thẻ html, vd như <p>HTML</p> thì HTML là nút văn bản.
Từng thành phần của DOM tree đều có mối liên hệ với nhau
Lợi ích của DOM:
- Hiểu được cách trình duyệt xây dựng cây DOM
- Giảm được thời gian load trang web
DOM có thể hiểu là lấy, thêm, thay đổi, xóa thuộc tính của HTML
VD về một số câu lệnh của DOM:
- DOM lấy giá trị của thuộc tính: getAttribute
- DOM sửa giá trị thuộc tính: setAttribute
- DOM thêm 1 nút con : appendChild(node)
- DOM xóa 1 nút con khỏi nút hiện tại: removeChild(node)
