Bài viết dưới đây sẽ giải thích chi tiết về chủ đề DOM (Document Object Model), giải thích các câu hỏi quan trọng liên quan đến DOM, giúp bạn hiểu rõ hơn về vai trò, cấu trúc và cách thao tác với DOM trong lập trình web. Đọc ngay!
DOM là gì và nó liên quan như thế nào đến HTML?
DOM (Document Object Model) là viết tắt của Mô hình Các Đối tượng Tài liệu, được định nghĩa bởi tổ chức W3C như một chuẩn để mô tả cấu trúc tài liệu HTML hoặc XML dưới dạng một mô hình đối tượng có thể truy cập và thao tác bằng các ngôn ngữ lập trình như JavaScript, PHP, Ruby… Trong đó, mỗi phần tử HTML được biểu diễn như một đối tượng (object) với các thuộc tính và phương thức riêng biệt.
DOM cho phép các lập trình viên truy cập, thay đổi nội dung, cấu trúc và kiểu dáng của trang web một cách linh hoạt, từ đó tạo ra các trang web động, tương tác và phản hồi nhanh với hành động người dùng. Ví dụ, bạn có thể thay đổi nội dung một đoạn văn, thêm mới một hình ảnh, hoặc xử lý sự kiện nhấp chuột trên một nút mà không cần tải lại toàn bộ trang.
Tầm quan trọng của DOM trong phát triển web
DOM đóng vai trò trung tâm trong việc xây dựng các ứng dụng web hiện đại. Nếu không có DOM, các trang web sẽ chỉ là các tài liệu tĩnh, không thể phản hồi hay tương tác với người dùng. Một số lý do DOM quan trọng bao gồm:
- Cập nhật nội dung động: Thay đổi nội dung, hình ảnh, hoặc các phần tử HTML mà không cần tải lại trang.
- Xử lý sự kiện: Lắng nghe và phản hồi các hành động của người dùng như click, hover, nhập liệu.
- Xây dựng ứng dụng trang đơn (SPA): Nội dung được cập nhật liên tục mà không cần tải lại trang, giúp trải nghiệm người dùng mượt mà hơn.
- Hỗ trợ web scraping: Giúp các công cụ tự động trích xuất dữ liệu từ các phần tử cụ thể trên trang web.
Nhờ DOM, các nhà phát triển có thể tạo ra các trang web tương tác, linh hoạt và dễ dàng bảo trì.
DOM có cấu trúc như thế nào?
DOM được tổ chức theo dạng cây phân cấp (DOM Tree), trong đó mỗi nút (node) đại diện cho một phần tử trong tài liệu HTML hoặc XML. Cấu trúc này bao gồm:
- Nút gốc (Document node): Đại diện cho toàn bộ tài liệu, thường là thẻ .
- Nút phần tử (Element node): Đại diện cho các thẻ HTML như , ,
,…
- Nút văn bản (Text node): Đại diện cho nội dung văn bản bên trong các thẻ HTML.
- Nút thuộc tính (Attribute node): Đại diện cho các thuộc tính của thẻ như id, class, src.
- Nút chú thích (Comment node): Đại diện cho các chú thích trong HTML.
Sự khác nhau giữa DOM và các phương thức getElementById, getElementsByClassName
DOM là một mô hình dữ liệu và cấu trúc đại diện cho toàn bộ tài liệu HTML, trong khi các phương thức như getElementById, getElementsByClassName là các công cụ truy xuất phần tử cụ thể trong DOM bằng JavaScript.
- DOM: Là toàn bộ cấu trúc cây đối tượng của tài liệu HTML, bao gồm tất cả các phần tử, thuộc tính, và nội dung.
- getElementById(id): Trả về một phần tử duy nhất có thuộc tính id bằng với giá trị truyền vào. Đây là phương thức truy xuất nhanh và phổ biến nhất vì id là duy nhất trong trang.
- getElementsByClassName(className): Trả về một tập hợp (NodeList) các phần tử có lớp CSS (class) trùng với tên được chỉ định. Đây là phương thức truy xuất nhiều phần tử cùng lúc.
- Tóm lại, DOM là toàn bộ “bản đồ” của tài liệu, còn các phương thức trên là “công cụ” để tìm kiếm và thao tác các phần tử cụ thể trong bản đồ đó.
Các thuộc tính, phương thức và cách truy xuất trong DOM
Thuộc tính quan trọng trong DOM
- id: Định danh duy nhất của phần tử, thường dùng để truy xuất nhanh.
- className: Tên lớp CSS của phần tử, dùng để nhóm và truy xuất nhiều phần tử.
- innerHTML: Nội dung HTML bên trong phần tử, có thể đọc hoặc thay đổi.
- textContent: Nội dung văn bản thuần túy bên trong phần tử, không bao gồm thẻ HTML.
- parentNode: Trỏ đến phần tử cha của phần tử hiện tại.
- childNodes: Danh sách các nút con của phần tử.
- classList: Đối tượng hỗ trợ thao tác thêm, xóa, kiểm tra lớp CSS của phần tử.
Các phương thức truy xuất và thao tác DOM phổ biến
- document.getElementById(id): Truy xuất phần tử theo id.
- document.getElementsByClassName(className): Truy xuất danh sách phần tử theo class.
- document.getElementsByTagName(tagName): Truy xuất danh sách phần tử theo tên thẻ.
- document.querySelector(selector): Truy xuất phần tử đầu tiên theo selector CSS.
- document.querySelectorAll(selector): Truy xuất tất cả phần tử theo selector CSS.
- element.setAttribute(name, value): Thêm hoặc thay đổi thuộc tính của phần tử.
- element.getAttribute(name): Lấy giá trị thuộc tính của phần tử.
- element.appendChild(node): Thêm nút con vào phần tử hiện tại.
- element.removeChild(node): Xóa nút con khỏi phần tử hiện tại.
Ví dụ thao tác đơn giản với DOM bằng JavaScript
javascript
// Lấy phần tử có id “main-content”
const mainContent = document.getElementById(“main-content”);
// Thay đổi nội dung HTML bên trong phần tử
mainContent.innerHTML = “Chào mừng bạn đến với website của chúng tôi!”;
// Thêm lớp CSS mới cho phần tử
mainContent.classList.add(“highlight”);
// Lấy tất cả phần tử có class “item”
const items = document.getElementsByClassName(“item”);
// Lặp qua và thay đổi nội dung từng phần tử
for (let i = 0; i < items.length; i++) {
items.textContent = Mục số ${i + 1};
}
Như vậy, DOM cung cấp một hệ thống đối tượng mạnh mẽ để truy cập và thay đổi nội dung, cấu trúc cũng như kiểu dáng của trang web một cách linh hoạt và hiệu quả.
DOM là nền tảng không thể thiếu trong phát triển web hiện đại, giúp biến các trang web tĩnh thành các ứng dụng web tương tác và động. Hiểu rõ về DOM, cấu trúc cây DOM, cũng như các phương thức truy xuất và thao tác phần tử trong DOM sẽ giúp bạn nâng cao kỹ năng lập trình web, tối ưu trải nghiệm người dùng và phát triển các ứng dụng web chuyên nghiệp.
Tìm hiểu đầy đủ hơn về DOM tại: DOM là gì? Các thuộc tính, phương thức & Truy xuất trong DOM