Document Object Model (DOM) là gì? Cấu trúc, tính năng của DOM như thế nào? Hãy cùng tìm hiểu tại bài viết dưới đây nhé!
Document Object Model (DOM) là một giao diện lập trình định dạng tài liệu HTML và XML thành một cấu trúc cây logic. Cấu trúc này cho phép lập trình viên truy cập và thao tác các nội dung và thuộc tính của trang web bằng cách sử dụng các ngôn ngữ lập trình như JavaScript. Mỗi phần của tài liệu (như các thẻ HTML, thuộc tính và văn bản) được biểu diễn dưới dạng các đối tượng trong DOM.
Cấu trúc của DOM
DOM tổ chức tài liệu dưới dạng cây, nơi mỗi nút (node) đại diện cho một phần của tài liệu:
- Document: Gốc của cây DOM, đại diện cho toàn bộ tài liệu.
- Element: Đại diện cho các thẻ HTML, như <div>, <p>, <a>,…
- Attribute: Đại diện cho các thuộc tính của thẻ HTML, như id, class, src,…
- Text: Đại diện cho các nội dung văn bản bên trong các thẻ HTML.
- Comment: Đại diện cho các chú thích trong HTML (<!– Comment –>).
Truy cập các phần tử trong DOM
Để thao tác với DOM, bạn cần truy cập các phần tử HTML. JavaScript cung cấp nhiều phương thức để làm điều này:
- document.getElementById(): Truy cập phần tử bằng ID.
- document.getElementsByClassName(): Truy cập các phần tử bằng tên lớp (class).
- document.getElementsByTagName(): Truy cập các phần tử bằng tên thẻ.
- document.querySelector(): Truy cập phần tử đầu tiên phù hợp với CSS selector.
- document.querySelectorAll(): Truy cập tất cả các phần tử phù hợp với CSS selector.
Ví dụ:
Thao tác với nội dung và thuộc tính của phần tử
Bạn có thể thay đổi nội dung và thuộc tính của phần tử bằng các phương thức và thuộc tính DOM:
- Thay đổi nội dung HTML: Sử dụng innerHTML.
2. Thay đổi nội dung văn bản: Sử dụng textContent.
3. Thay đổi thuộc tính: Sử dụng setAttribute và getAttribute.
Thay đổi kiểu dáng (CSS) của phần tử
Bạn có thể thay đổi kiểu dáng của phần tử trực tiếp qua thuộc tính style hoặc thông qua lớp CSS (class):
- Thay đổi thuộc tính CSS trực tiếp:
2. Thêm, xóa và kiểm tra lớp CSS:
Thêm và xóa phần tử trong DOM
Bạn có thể tạo mới và xóa phần tử trong DOM bằng cách sử dụng các phương thức sau:
- Tạo phần tử mới:
2. Thêm phần tử mới vào tài liệu:
3. Xóa phần tử:
Sự kiện (Events) trong DOM
DOM cho phép bạn thêm các sự kiện để tương tác với người dùng. Bạn có thể sử dụng addEventListener để thêm các trình xử lý sự kiện cho phần tử.
Có thể thấy, DOM là một công cụ mạnh mẽ giúp lập trình viên truy cập và thao tác với các tài liệu HTML và XML. Việc hiểu và sử dụng DOM đúng cách sẽ giúp bạn xây dựng các trang web động và tương tác hơn. Với các phương thức và thuộc tính mà DOM cung cấp, bạn có thể dễ dàng thay đổi nội dung, thuộc tính, kiểu dáng và sự kiện của các phần tử trên trang web, từ đó tạo ra những trải nghiệm người dùng phong phú và hấp dẫn.
Giảng viên Trần Thị Mỹ Lệ
Bộ môn CNTT
FPT Polytechnic TP HCM
