DOM trong Javascript

Bài hôm nay mình sẽ đi giới thiệu về DOM (Document Object Model) trong Javascript

Mục Lục:

1. DOM là gì?

DOM là chữ viết tắt từ tiếng Anh Document Object Model ("Mô hình Đối tượng Tài liệu"), là một giao diện lập trình ứng dụng (API). Thường thường DOM, có dạng một cây cấu trúc dữ liệu, được dùng để truy xuất các tài liệu dạng HTML và XML. Mô hình DOM độc lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài liệu.

Ban đầu, chưa có chuẩn thống nhất nên các thành phần trong một tài liệu HTML mô tả bằng các phiên bản khác nhau của DOM được hiển thị bởi các chương trình duyệt web thông qua JavaScript. Điều này buộc World Wide Web Consortium (W3C) phải đưa ra một loạt các mô tả kĩ thuật về tiêu chuẩn cho DOM để thống nhất mô hình này.

DOM dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như JavaScript, PHP, Python.

2. Cấu trúc của DOM

Đối với HTML DOM, mỗi thành phần đều được xem là 1 nút (node), được biểu diễn trên 1 cây cấu trúc dạng cây gọi là DOM Tree. Các phần tử khác nhau sẽ được phân loại nút khác nhau nhưng quan trọng nhất là 3 loại: nút gốc (document node), nút phần tử (element node), nút văn bản (text node).

Nút gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ <html>.

Nút phần tử: biểu diễn cho 1 phần tử HTML.

Nút văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 nút văn bản. Đó có thể là tên trang web trong thẻ <title>, tên đề mục trong thẻ <h1>, hay một đoạn văn trong thẻ

.

Ngoài ra, còn có nút thuộc tính (attribute node) và nút chú thích (comment node).

3. Các loại DOM trong JavaScript

Việc xử lý và làm việc với đối tượng HTML rất phức tạp và đa dạng. Chính vì vậy, JavaScript cung cấp cho chúng ta các phương thức, đối tượng và mỗi thành phần như vậy có những nhiệm vụ riêng biệt. Dưới đây là 8 loại DOM thường được sử dụng trong JavaScript:

DOM Document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website.

DOM Element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML.

DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML.

DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML.

DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các thẻ HTML.

DOM EventListener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó.

DOM Navigation: dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha – con của các thẻ HTML.

DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object).