Mô hình đối tượng tài liệu (DOM) là một giao diện quan trọng cho phép các nhà phát triển tương tác với các tài liệu web bằng các ngôn ngữ kịch bản như JavaScript. Nó thể hiện một cái nhìn có cấu trúc, phân cấp và logic về nội dung của tài liệu web, chẳng hạn như HTML hoặc XML, dưới dạng cấu trúc giống như cây.
Nguồn gốc của Mô hình đối tượng tài liệu (DOM)
Khái niệm DOM lần đầu tiên xuất hiện vào giữa đến cuối những năm 1990 do nhu cầu cho phép nhiều nội dung web tương tác hơn. Với sự ra đời của các trang web động và việc sử dụng rộng rãi JavaScript, cần có một mô hình cho phép các tập lệnh thay đổi cấu trúc, kiểu dáng và nội dung tài liệu. World Wide Web Consortium (W3C) đảm nhận nhiệm vụ tạo API tiêu chuẩn hóa cho mục đích này, dẫn đến sự phát triển của DOM.
Cấp độ DOM tiêu chuẩn đầu tiên, DOM Cấp 1, được W3C giới thiệu vào năm 1998. Nó cung cấp một mô hình toàn diện cho toàn bộ tài liệu HTML hoặc XML, bao gồm các phương tiện để thay đổi bất kỳ phần nào của tài liệu.
Mở rộng Mô hình đối tượng tài liệu (DOM)
DOM về cơ bản là một nền tảng và giao diện trung lập về ngôn ngữ cho phép các chương trình và tập lệnh truy cập và cập nhật động nội dung, cấu trúc và kiểu dáng của tài liệu.
DOM được tổ chức thành một hệ thống phân cấp các nút, mỗi nút đại diện cho một phần của tài liệu, chẳng hạn như các phần tử, thuộc tính và văn bản. Cấu trúc cây logic này giúp bạn dễ dàng điều hướng và thao tác với nội dung của tài liệu.
Tài liệu web được mô hình hóa dưới dạng cây đối tượng, tất cả đều có thuộc tính và phương thức, đồng thời có thể chứa các đối tượng khác. Ví dụ: một tài liệu HTML được chuyển đổi thành các đối tượng đại diện cho các phần tử như “body”, “div”, “span” và “p”, cũng như các thuộc tính và nội dung văn bản của chúng.
Mô hình đối tượng tài liệu (DOM) hoạt động như thế nào
Cấu trúc bên trong của DOM được tổ chức dưới dạng cây các nút. Nút trên cùng là Document nút, đại diện cho toàn bộ tài liệu. Dưới đây, Element các nút tương ứng với các thành phần HTML trong trang, Attribute các nút giữ các thuộc tính của các phần tử và Text các nút giữ nội dung văn bản của các phần tử.
Cấu trúc phân cấp này cho phép các nhà phát triển điều hướng cây tài liệu và sử dụng các phương thức API để chọn, tạo, sửa đổi hoặc xóa các nút.
Sau đây là ví dụ về cách một tài liệu HTML trông như một cây DOM:
toán họcDocument
↳ Element: html
↳ Element: head
↳ Element: title
↳ Text: "Title of the Document"
↳ Element: body
↳ Element: h1
↳ Text: "Hello, world!"
↳ Element: p
↳ Text: "This is a paragraph."
Các tính năng chính của Mô hình đối tượng tài liệu (DOM)
-
Cấu trúc cây: DOM thể hiện một tài liệu theo cấu trúc cây logic, giúp cho việc điều hướng, lựa chọn và thao tác trở nên đơn giản và trực quan.
-
Ngôn ngữ trung lập: DOM không bị ràng buộc với bất kỳ ngôn ngữ lập trình cụ thể nào. Nó là một quy ước để biểu diễn và tương tác với các đối tượng trong HTML, XML và các loại tài liệu khác.
-
Truy cập và cập nhật động: DOM cho phép các chương trình truy cập và cập nhật động nội dung, cấu trúc và kiểu dáng của tài liệu.
-
Tiêu chuẩn hóa: DOM là một tiêu chuẩn W3C, đảm bảo sự chấp nhận và tương thích rộng rãi trên các trình duyệt và nền tảng khác nhau.
Các loại mô hình đối tượng tài liệu (DOM)
Đặc tả DOM được chia thành nhiều “cấp độ” và “mô-đun”, mỗi cấp độ bổ sung thêm các tính năng và chức năng cho cấp độ trước đó. Các loại khóa bao gồm:
| Cấp/Loại DOM | Mô tả ngắn gọn |
|---|---|
| DOM cấp 1 | Cung cấp mô hình cơ bản cho toàn bộ tài liệu HTML hoặc XML, bao gồm các phương thức để thao tác các phần tử và thuộc tính của chúng. |
| DOM cấp 2 | Đã giới thiệu các tính năng như xử lý không gian tên, mô-đun kiểu hỗ trợ CSS và một số giao diện mới để xử lý các bảng, sự kiện, v.v. |
| DOM cấp 3 | Đã thêm hỗ trợ cho XPath và xử lý sự kiện bàn phím, giới thiệu giao diện để tải và lưu tài liệu. |
| DOM cấp 4 | Đơn giản hóa DOM cốt lõi bằng cách giảm sự phụ thuộc, đưa ra lời hứa cho các hoạt động không đồng bộ và thêm nhiều tính năng hơn như các tính năng dành cho phụ huynh để thao tác nút dễ dàng hơn. |
Sử dụng Mô hình đối tượng tài liệu (DOM)
DOM được sử dụng mỗi khi trang web được thao tác bằng JavaScript. Đó là API nền tảng cho nhiều công nghệ web.
Các nhà phát triển sử dụng DOM để tự động thay đổi giao diện và nội dung của trang web mà không yêu cầu tải lại toàn bộ trang, cho phép giao diện người dùng tương tác và phản hồi nhanh.
Bất chấp sức mạnh của nó, DOM không phải là không có vấn đề. Nó có thể trở nên chậm nếu không sử dụng cẩn thận, đặc biệt với các tài liệu web lớn hoặc phức tạp. Thao tác DOM được tối ưu hóa kém có thể dẫn đến kết xuất trang chậm và giao diện không phản hồi. Để giải quyết vấn đề này, các nhà phát triển thường sử dụng các thư viện hoặc framework như jQuery, React hoặc Vue.js, những thư viện này cung cấp API cấp cao hơn để thao tác DOM hiệu quả.
Đặc điểm và so sánh DOM với các thuật ngữ tương tự
| Thuật ngữ | Sự miêu tả | So sánh |
|---|---|---|
| DOM | API dành cho tài liệu HTML và XML, cung cấp cách trình bày cấu trúc của tài liệu và cho phép các nhà phát triển thao tác nội dung và cách trình bày trực quan của tài liệu đó. | |
| CSSOM | CSS Object Model (CSSOM) là bản đồ các kiểu CSS, tương tự như DOM nhưng đặc biệt dành cho CSS. Nó cho phép thao tác với các bảng định kiểu và kiểu được áp dụng cho DOM. | Trong khi DOM tập trung vào cấu trúc tài liệu thì CSSOM tập trung vào lớp trình bày. |
| Bóng tối DOM | Một cơ chế đóng gói các phần của cây DOM để triển khai Thành phần Web. Nó cô lập các phần của DOM để “ẩn” chúng khỏi cây tài liệu chính. | Không giống như DOM thông thường, Shadow DOM cung cấp tính năng đóng gói kiểu dáng và hành vi. |
Viễn cảnh tương lai liên quan đến Mô hình đối tượng tài liệu (DOM)
Khi công nghệ web tiếp tục phát triển, API DOM cũng có khả năng mở rộng và cải thiện. Những phát triển tiềm năng trong tương lai bao gồm các phương pháp thao tác DOM hiệu quả hơn, cải thiện khả năng tích hợp với các tiêu chuẩn web mới nổi và sự phát triển liên tục của chính đặc tả HTML.
Một sự phát triển thú vị đang diễn ra là việc áp dụng dần dần các Thành phần Web, cho phép tạo các thẻ HTML được đóng gói và có thể tái sử dụng. Điều này gắn chặt với Shadow DOM, cung cấp phương pháp đóng gói các phần tử DOM.
Mô hình đối tượng tài liệu (DOM) và máy chủ proxy
Máy chủ proxy là một trung gian chuyển tiếp các yêu cầu và phản hồi giữa máy khách và máy chủ. Trong khi DOM chủ yếu quan tâm đến cấu trúc và thao tác của các tài liệu web ở phía máy khách thì các máy chủ proxy hoạt động ở cấp độ mạng.
Tuy nhiên, điểm giao nhau của cả hai có thể được tìm thấy trong các tình huống trong đó máy chủ proxy có thể sửa đổi nội dung của tài liệu web. Ví dụ: máy chủ proxy có thể thêm, xóa hoặc sửa đổi các thành phần DOM trong trang web trước khi nó đến máy khách. Điều này có thể được sử dụng vì nhiều lý do, chẳng hạn như chèn tập lệnh, xóa các phần tử không mong muốn hoặc sửa đổi nội dung cho mục đích bản địa hóa hoặc tùy chỉnh.
Liên kết liên quan
- Tài liệu web MDN: Mô hình đối tượng tài liệu (DOM)
- Tiêu chuẩn DOM W3C
- Thông tin JavaScript: DOM
- Nguyên tắc cơ bản về web của Google: Cách trình duyệt hoạt động
Tổng quan này sẽ cung cấp sự hiểu biết toàn diện về Mô hình đối tượng tài liệu (DOM), nguồn gốc của nó, cách thức hoạt động, các đặc điểm của nó và khả năng phát triển của nó. DOM vẫn là nền tảng của phát triển web tương tác và sẽ tiếp tục đóng một vai trò quan trọng khi công nghệ web phát triển.
