Trang chủ Development

DOM là gì? Tìm hiểu về Document Object Model

DOM là gì?

DOM (Document Object Model) là một API dùng để hiển thị các phần tử của tài liệu HTML và XML dưới dạng ngôn ngữ lập trình đối tượng. Cấu trúc DOM cho bất kỳ tài liệu nào cũng đều giống với cấu trúc thực tế của phần tài liệu được đánh dấu. Các web developer cũng có thể lập trình DOM để sửa đổi trang web, trước hoặc trong khi người dùng xem nó.

Hiện tại, HTML (Ngôn ngữ đánh dấu siêu văn bản) và XML (Ngôn ngữ đánh dấu mở rộng) là cách để trình bày một tài liệu theo cấu trúc dữ liệu. Là các chương trình dạng đối tượng, các tài liệu này có thể "ẩn" nội dung và dữ liệu bên trong đối tượng, giúp đảm bảo khả năng kiểm soát những người có thể thao tác trên tài liệu. Khi ở dưới dạng đối tượng, các tài liệu có thể mang theo cùng các procedure hướng đối tượng và được gọi là các method/phương thức.

DOM là một cách thức mở và có tính chiến lược trong việc xác định nên cung cấp kiểm soát lập trình đối với các tài liệu như thế nào. DOM được phát triển từ một tính năng mới của HTML gọi là HTML động và phương thức này thúc đẩy sự giao tiếp giữa các trình duyệt, web page và các thành phần.

Document Object Model đưa ra hai cấp độ triển khai giao diện: DOM Core - hỗ trợ XML và là cơ sở cho cấp độ tiếp theo; DOM HTML - mở rộng mô hình thành các tài liệu HTML. Một số điểm đáng chú ý như sau:

DOM là gì? Tìm hiểu về Document Object Model - Ảnh 1.

Mô hình DOM

Bất kỳ phần tử HTML hay XML nào (có thể có những ngoại lệ) đều sẽ được lập trình theo từng địa chỉ riêng lẻ.

Các đặc tính kỹ thuật sẽ độc lập với ngôn ngữ. Thông số kỹ thuật, khi đã khả dụng, sẽ được mô tả bằng ngôn ngữ định nghĩa giao diện (IDL) từ tiêu chuẩn mở CORBA.

Ngoài ra, giao diện sẽ được mô tả bằng ngôn ngữ lập trình Java và ECMAScript, ngôn ngữ script tiêu chuẩn sẽ dựa trên JavaScript và Jscript.

Không nên nhầm lẫn DOM với Mô hình đối tượng thành phần (COM) của Microsoft hoặc Mô hình đối tượng thành phần phân tán (DCOM). COM và CORBA là các phương thức không sử dụng ngôn để xác định các đối tượng và chúng có thể được sử dụng để tạo các đối tượng DOM (tài liệu) như các ngôn ngữ cụ thể khác (ví dụ Java chẳng hạn).

Ngôn ngữ lập trình của DOM

Ngôn ngữ lập trình phổ biến nhất được sử dụng trong DOM là JavaScript - ngôn ngữ được sử dụng trên hầu hết các trang web.

DOM là gì? Tìm hiểu về Document Object Model - Ảnh 2.

JavaScript cho phép thực hiện các thay đổi động đối với DOM, bao gồm ẩn, di chuyển và tạo hiệu ứng cho các thành phần HTML nhất định (như văn bản, bảng, hình ảnh và toàn bộ các bộ phận).

Trước đây, DOM có sự khác biệt khá rõ rệt giữa các trình duyệt, nhưng ngày nay công cụ này đã được chuẩn hóa hơn nhiều, cho phép các developer dễ dàng hơn trong việc script chéo trình duyệt.

>> Tham khảo thêm: JavaScript là gì và nó hoạt động như thế nào?

Một ví dụ về DOM sử dụng HTML

Cùng xem xét tài liệu HTML sau:

<html>

<head>

<title>Example</title>

</head>

<body>

<h1>Example Page</h1>

<p>This is an example page.</p>

</body>

</html>

DOM sử dụng cho tài liệu này bao gồm tất cả các phần tử và text node trong các phần tử đó. Code trong ví dụ trên tạo ra một hệ thống phân cấp đối tượng như sau:

Đối với mỗi phần tử bên dưới document root (<html>), có một phần tử node và các phần tử node này có các text node chứa văn bản nằm trong phần tử. Nếu có một phần tử nào đó chứa các thuộc tính, một node thuộc tính sẽ được tạo cho phần tử đó và tất cả các text của thuộc tính sẽ tạo một text node phía dưới node thuộc tính đó.

Theo BizFly tổng hợp

>> Có thể bạn quan tâm: Dependency injection là gì? 3 điều cần biết về DI

Kể từ ngày 05/11/2018, VCCloud chính thức đổi tên thành BizFly Cloud - là nhà cung cấp các dịch vụ đám mây hàng đầu tại Việt Nam hiện nay với các dịch vụ nổi bật như: BizFly Cloud Server, BizFly CDN, BizFly Load Balancer, BizFly Pre-built Application, BizFly Business Mail, BizFly Simple Storage. Hãy tăng tốc thích nghi cho doanh nghiệp cùng các giải pháp công nghệ của BizFly Cloud tại đây.