DOM (Document Object Model) là công cụ “nhạc trưởng” cho mọi tương tác động trên trang web, giúp bạn truy cập, thay đổi và quản lý nội dung theo mô hình hướng đối tượng. Từ cấu trúc cây đến các phương thức thao tác, DOM là chìa khóa để tạo trải nghiệm web linh hoạt và mượt mà. Trong bài viết này, InterData sẽ cùng bạn tìm hiểu khái niệm DOM là gì, từ khái niệm cơ bản, các loại DOM, cách hoạt động đến các thuộc tính, phương thức và truy xuất trong DOM. Tìm hiểu ngay!
DOM là gì?
DOM, viết tắt của Document Object Model, là một giao diện lập trình (API) cung cấp cho các ngôn ngữ kịch bản, phổ biến nhất là JavaScript, khả năng truy cập và tương tác với nội dung, cấu trúc và kiểu dáng của tài liệu web (HTML, XML, SVG).
Nó hoạt động bằng cách biểu diễn tài liệu dưới dạng một cấu trúc cây phân cấp các đối tượng (nodes). Mỗi phần của tài liệu, từ thẻ HTML, thuộc tính, cho đến nội dung văn bản, đều được coi là một node trong cây này.
Cấu trúc dạng cây (DOM Tree) của DOM giúp các lập trình viên dễ dàng định vị, thêm, xóa hoặc sửa đổi bất kỳ phần tử nào trên trang web một cách có hệ thống và logic. Điều này là nền tảng cho việc tạo ra các giao diện người dùng động và tương tác cao.
Nhờ có DOM, JavaScript có thể “hiểu” cấu trúc của trang web và thực hiện các thao tác như cập nhật nội dung mà không cần tải lại toàn bộ trang, bắt các sự kiện người dùng (như click, nhập liệu), và thay đổi giao diện dựa trên hành động của họ.
DOM là một tiêu chuẩn mở được định nghĩa và phát triển bởi W3C (World Wide Web Consortium). Việc có một tiêu chuẩn chung đảm bảo rằng các trình duyệt web khác nhau (như Chrome, Firefox, Safari) sẽ triển khai DOM theo cùng một cách, giúp mã JavaScript hoạt động nhất quán trên mọi nền tảng. Tiêu chuẩn này liên tục được cập nhật để hỗ trợ các tính năng web mới.
Vai trò cốt lõi của DOM là cầu nối giữa tài liệu web (HTML/CSS tĩnh) và logic động (JavaScript). Nó cho phép JavaScript “thấy” và “chạm” vào mọi thành phần của trang. Điều này mở ra khả năng tạo ra các ứng dụng web phong phú, từ các hiệu ứng đơn giản đến các ứng dụng phức tạp đòi hỏi cập nhật giao diện theo thời gian thực mà không cần tải lại trang.
HTML DOM là gì?
HTML DOM (Document Object Model) cho phép chúng ta thao tác nội dung và cấu trúc trang theo mô hình hướng đối tượng. Mỗi phần tử trong tài liệu HTML được biểu diễn thành một đối tượng với các thuộc tính và phương thức, giúp bạn dễ dàng truy xuất, thêm, xóa, sửa hoặc cập nhật mà vẫn giữ nguyên tính cấu trúc.
Cụ thể, DOM định nghĩa:
- HTML elements như các objects
- Properties của mọi phần tử HTML
- Methods để truy cập và thao tác các phần tử
- Events cho từng phần tử HTML
Cấu trúc cây DOM
Nút
DOM được mô hình hóa dưới dạng cây, trong đó mỗi phần tử HTML là một “node”. 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).
- Element Node: đại diện cho thẻ HTML
- Text Node: chứa nội dung văn bản bên trong phần tử
- Attribute Node: biểu thị thuộc tính của phần tử (id, class, href…)
- Comment Node: chứa các chú thích trong mã nguồn HTML
Mô hình cây này cho phép lập trình viên sử dụng JavaScript để thêm, sửa hoặc xóa node một cách linh hoạt.
Quan hệ các nút trong DOM
Trong cây DOM, các node được liên kết theo quan hệ cha – con và anh – em:
- Mối quan hệ cha con (parent-child relationship): Một node cha có thể chứa nhiều node con, còn mỗi node con chỉ có duy nhất một node cha.
- Mối quan hệ anh em (sibling relationship): Những node cùng chung node cha nằm cạnh nhau được gọi là node “anh – em”.
Nhờ hiểu rõ các mối quan hệ này, bạn có thể dễ dàng duyệt cây DOM và thực hiện thay đổi thuộc tính, nội dung hoặc cấu trúc trang web một cách hiệu quả bằng JavaScript.
DOM hoạt động như thế nào?
Document Object Model (DOM) hoạt động bằng cách biểu diễn một trang web dưới dạng cấu trúc cây (DOM tree). Mỗi phần tử trên trang, ví dụ một đoạn văn hay một hình ảnh, được đại diện thành một nút (node) trong cây này. Cấu trúc phân cấp giúp các kịch bản (script) dễ dàng điều hướng và thao tác trên trang web.
Khi trang web được tải, trình duyệt sẽ tạo ra DOM của trang đó – một dạng biểu diễn hướng đối tượng của các phần tử HTML. Mỗi nút trong cây DOM tương ứng với một đối tượng có các thuộc tính (properties) và phương thức (methods). Thuộc tính là những đặc điểm của phần tử HTML như tên thẻ hoặc giá trị, còn phương thức là những hành động có thể thực hiện trên phần tử đó.
Các kịch bản, thường viết bằng JavaScript, sẽ tương tác với DOM để thay đổi nội dung, cấu trúc hoặc kiểu dáng của trang web. Chúng truy cập và thao tác thông qua các thuộc tính và phương thức của các đối tượng trong cây DOM.
Tại sao Document Object Model lại quan trọng?
Tại sao cần sử dụng DOM? DOM là nền tảng để tạo ra các trải nghiệm web tương tác và động. Đây chính là xương sống của phát triển web hiện đại, cho phép kịch bản truy cập và chỉnh sửa động nội dung, cấu trúc và giao diện trang mà không cần tải lại trang. Nếu không có DOM, trang web chỉ tĩnh và hạn chế khả năng tương tác với người dùng.
Bên cạnh tính tương tác, DOM còn hỗ trợ cập nhật nội dung hiệu quả: mọi thay đổi qua DOM sẽ được hiển thị ngay trên trang mà không cần tải lại. Điều này mang lại trải nghiệm mượt mà và đáp ứng nhanh cho người dùng.
Với lập trình viên, một ưu điểm lớn của DOM là ngôn ngữ độc lập, bạn có thể dùng bất kỳ ngôn ngữ nào hỗ trợ DOM để thao tác trang web, tạo nên một công cụ linh hoạt trong bộ công cụ phát triển.
Các loại DOM trong Javascript
DOM có rất nhiều loại, điển hình như:
- Document Object Model (DOM Document): Đây là cây DOM chính, chứa toàn bộ thành phần của trang web dưới dạng các document node.
- Element Object Model (DOM Element): Cho phép bạn tìm và thao tác với các thẻ HTML dựa trên thuộc tính như id, class hoặc name.
- HTML Object Model (DOM HTML): Hỗ trợ thay đổi nội dung bên trong thẻ HTML và cập nhật giá trị của các thuộc tính.
- CSS Object Model (DOM CSS): Cho phép điều chỉnh các thuộc tính CSS của phần tử, ví dụ như màu sắc, kích thước hay vị trí.
- Event Object Model (DOM Event): Dùng để gán các trình xử lý sự kiện như onclick() hoặc onload() cho các phần tử HTML.
- Event Listener Model (DOM Listener): Lắng nghe và phản hồi các sự kiện được kích hoạt trên phần tử, chẳng hạn như nhấp chuột hoặc phím bấm.
- Navigation Object Model (DOM Navigation): Cung cấp phương thức đi qua các nút cha – con trong cây DOM để quản lý cấu trúc và quan hệ giữa các thẻ.
- Node & NodeList (DOM Node, NodeList): Cho phép thao tác với các thành phần HTML dưới dạng đối tượng JavaScript, bao gồm các node đơn lẻ hoặc tập hợp node.
Các cấp độ của DOM
DOM gồm nhiều cấp độ, mỗi cấp thể hiện những khía cạnh khác nhau của tài liệu.
Cấp 0: Cung cấp tập hợp các giao diện ở cấp thấp.
Cấp 1: Được chia thành hai phần:
- CORE: giao diện cấp thấp dùng để đại diện cho bất kỳ tài liệu có cấu trúc nào.
- HTML: giao diện cấp cao dùng để đại diện cho tài liệu HTML.
Cấp 2: Gồm sáu thông số kỹ thuật: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL và RANGE.
- CORE2: mở rộng tính năng của CORE trong DOM cấp 1.
- VIEWS: cho phép chương trình truy cập và thao tác động với nội dung tài liệu.
- EVENTS: kịch bản do trình duyệt chạy khi người dùng tương tác với trang.
- STYLE: cho phép chương trình truy cập và thao tác động với nội dung của file style sheet.
- TRAVERSAL: hỗ trợ chương trình duyệt cây tài liệu một cách động.
- RANGE: cho phép chương trình xác định động một phạm vi nội dung trong tài liệu.
Cấp 3: Gồm năm thông số kỹ thuật: CORE3, LOAD and SAVE, VALIDATION, EVENTS và XPATH.
- CORE3: mở rộng tính năng của CORE trong DOM cấp 2.
- LOAD and SAVE: cho phép nạp động nội dung của tài liệu XML vào DOM và lưu DOM thành tài liệu XML qua quá trình tuần tự hóa.
- VALIDATION: cho phép cập nhật động nội dung và cấu trúc tài liệu đồng thời đảm bảo tài liệu luôn hợp lệ.
- EVENTS: mở rộng tính năng Events trong DOM cấp 2.
- XPATH: ngôn ngữ đường dẫn dùng để truy cập cây DOM.
Các thuộc tính, phương thức và truy xuất trong DOM
Mọi nội dung trang web có thể được cập nhật ngay lập tức thông qua các thuộc tính và phương thức của DOM. Từ thay đổi kiểu chữ, nội dung văn bản đến tái cấu trúc các node hay thêm node mới, bạn cần nắm rõ từng thuộc tính, phương thức và ý nghĩa của chúng.
Các thuộc tính DOM thường dùng
- id: Định danh duy nhất, dùng để truy xuất nhanh phần tử.
- className: Tên lớp, cho phép chọn nhiều phần tử cùng class.
- tagName: Tên thẻ HTML.
- innerHTML: Trả về toàn bộ mã HTML bên trong phần tử.
- outerHTML: Trả về toàn bộ thẻ HTML, bao gồm tag và nội dung bên trong.
- textContent: Chuỗi văn bản thuần của tất cả node con.
- attributes: Tập hợp các thuộc tính như id, name, href…
- style: Đối tượng chứa các định dạng CSS của phần tử.
- value: Giá trị hiện tại của phần tử form như input, select.
Các phương thức DOM
- getElementById(id): Lấy một phần tử duy nhất theo ID.
- getElementsByTagName(tag): Trả về mảng các phần tử theo tên thẻ.
- getElementsByName(name): Trả về mảng node theo thuộc tính name.
- getAttribute(attr): Đọc giá trị một thuộc tính.
- setAttribute(attr, value): Gán hoặc sửa giá trị thuộc tính.
- appendChild(node): Thêm node con vào phần tử hiện tại.
- removeChild(node): Loại bỏ node con khỏi phần tử hiện tại.
Thuộc tính quan hệ hỗ trợ điều hướng DOM
- parentNode: Tham chiếu đến node cha.
- childNodes: Mảng các node con (kể cả text, comment).
- firstChild: Node con đầu tiên (
childNodes[0]). - lastChild: Node con cuối cùng (
childNodes[length-1]). - nextSibling: Node anh em kế tiếp.
- previousSibling: Node anh em liền trước.
Xem danh sách đầy đủ tại: W3SCHOOLS
Truy xuất DOM: Gián tiếp và Trực tiếp
Truy cập DOM gián tiếp
Mỗi phần tử trong cây DOM đều cung cấp sáu thuộc tính quan hệ giúp bạn truy cập gián tiếp dựa trên vị trí:
- Node.parentNode: Trả về nút cha duy nhất của phần tử hiện tại. Để lên đến “gốc” sâu hơn, bạn có thể xâu chuỗi, ví dụ
node.parentNode.parentNode. - Node.childNodes: Trả về mảng các nút con trực tiếp, bao gồm mọi loại node (element, text, comment…).
- Node.firstChild: Nút con đầu tiên của phần tử, tương đương với
childNodes[0]. - Node.lastChild: Nút con cuối cùng, tương đương với
childNodes[childNodes.length - 1]. - Node.nextSibling: Nút anh em liền kề phía sau.
- Node.previousSibling: Nút anh em liền kề phía trước.
Truy cập DOM trực tiếp
Khi bạn biết trước ID, tag hoặc thuộc tính name, việc truy xuất nhanh và đơn giản hơn rất nhiều với ba phương thức sau:
document.getElementById('id_cần_tìm')
document.getElementsByTagName('div')
document.getElementsByName('tên_cần_tìm')
DOM không chỉ đơn thuần là một khung thao tác HTML/CSS, mà còn là nền tảng để xây dựng giao diện web hiện đại, tương tác cao và dễ bảo trì. Khi hiểu rõ DOM là gì và thành thạo các phương pháp truy xuất, bạn sẽ tận dụng tối đa hiệu suất và trải nghiệm người dùng.
Nắm vững DOM là chìa khóa giúp bạn xây dựng các ứng dụng web có giao diện động và tương tác mượt mà. Khi dự án của bạn phát triển và cần một môi trường triển khai ổn định trên internet, dịch vụ thuê VPS tại InterData là giải pháp đáng cân nhắc. Dịch vụ Thuê VPS Linux Với cấu hình mạnh mẽ chip Intel Xeon, SSD NVMe U.2 tốc độ cao, dung lượng lưu trữ tối ưu, giá chỉ từ 95K/tháng, cùng băng thông không giới hạn, đây là nền tảng vững chắc sẵn sàng hỗ trợ ứng dụng của bạn.
