DOM là gì? Tìm hiểu thông tin và thao tác DOM trong Javascript
DOM có khả năng giúp bạn thay đổi được mọi thứ ở trong trang Web. Mọi nội dung đều có thể thêm bớt hoặc xóa sửa để mang đến trải nghiệm nội dung tốt nhất . Cùng Bizfly Cloud tìm hiểu những thông tin về Document Object Model ngay tại bài viết dưới đây nhé.
DOM là gì?
DOM (Document Object Model) là một mô hình đối tượng tài liệu và đồng thời là một API chuẩn cho phép các ngôn ngữ lập trình (như JavaScript) truy cập, thao tác và thay đổi cấu trúc của tài liệu HTML hoặc XML. DOM chuyển toàn bộ tài liệu thành một cây phân cấp gồm các đối tượng (nodes), trong đó mỗi phần tử HTML như <div>, <p>, <img>… được biểu diễn dưới dạng một đối tượng riêng biệt có thể được đọc, chỉnh sửa hoặc xóa bằng lập trình.
Cấu trúc DOM luôn phản ánh cấu trúc thực tế của tài liệu HTML/XML đã được trình duyệt tải. Nhờ mô hình này, lập trình viên có thể thay đổi nội dung, thuộc tính, kiểu dáng hoặc sự kiện trên trang web — trước, trong hoặc sau khi người dùng tương tá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:
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).
Chi tiết về cây cấu trúc trong DOM
Trong DOM toàn bộ tài liệu HTML được biểu diễn dưới dạng một cấu trúc cây phân cấp (DOM Tree). Mỗi thành phần trong tài liệu đều được chuyển thành một Node (nút). Dưới đây là các thành phần cơ bản trong cây DOM.
Node (Nút)
Trong cấu trúc DOM mỗi phần tử HTML hoặc nội dung văn bản đều được biểu diễn bằng một node trong cây. Mặc dù DOM có nhiều loại node khác nhau nhưng lập trình viên thường làm việc với 3 node quan trọng nhất:
Node gốc (Root Node)
- Là node cao nhất trong cây DOM.
- Thông thường tương ứng với thẻ
<html>. - Toàn bộ các node khác đều là con hoặc cháu của node gốc này.
Node phần tử (Element Node)
- Đại diện cho một phần tử HTML, ví dụ:
<div>,<p>,<h1>,<img>… - Đây là loại node mà lập trình viên tương tác nhiều nhất khi thao tác DOM (thay đổi thuộc tính, thêm/xóa phần tử…).
Node văn bản (Text Node)
- Điều khiển nội dung văn bản nằm bên trong một phần tử HTML.
- Ví dụ: nội dung trong
<title>, văn bản trong<h1>, đoạn chữ trong<p>. - Mỗi phần tử HTML chỉ có thể chứa tối đa một text node trực tiếp.
Quan hệ giữa các Node
DOM tổ chức node theo mô hình cây nên mỗi node có các mối quan hệ tương tự như gia phả:
Node gốc (Document)
- Là node ở vị trí cao nhất trong cây.
- Tất cả node khác đều xuất phát từ node này.
Node cha (Parent Node)
- Nếu một node không phải là root node, node chứa nó được gọi là parent node.
- Một parent node có thể chứa một hoặc nhiều node con.
Node con (Child Node)
- Là các node nằm trong một node cha.
- Một node có thể: Có nhiều con hoặc không có con nào (node lá)
4. Node anh em (Sibling Node)
- Là các node có chung một node cha.
- Trong nhóm node anh em: Node đầu tiên gọi là firstChild và Node cuối cùng gọi là lastChild
Vai trò và lợi ích của DOM trong JavaScript
DOM là nền tảng quan trọng giúp JavaScript tương tác với trang web. Nhờ DOM, lập trình viên có thể truy cập, thao tác và kiểm soát mọi phần tử HTML trên trang một cách linh hoạt. Vai trò chính của DOM trong JavaScript bao gồm:
Truy cập nội dung
JavaScript sử dụng DOM để truy xuất thông tin từ các phần tử HTML như văn bản, hình ảnh, liên kết hoặc bất kỳ dữ liệu nào hiển thị trên trang.
Thay đổi nội dung
DOM cho phép lập trình viên cập nhật hoặc thay thế nội dung của phần tử: chỉnh sửa văn bản, thêm hoặc xóa hình ảnh, cập nhật đường dẫn liên kết…
Thay đổi cấu trúc trang
Thông qua DOM, JavaScript có thể thêm mới, xóa bỏ hoặc di chuyển các phần tử HTML, từ đó thay đổi cấu trúc của trang web một cách linh hoạt mà không cần tải lại trang.
Thay đổi kiểu dáng (CSS)
JavaScript có thể chỉnh sửa trực tiếp CSS của phần tử thông qua DOM, ví dụ: thay đổi màu sắc, phông chữ, kích thước, vị trí… giúp giao diện trở nên động và tùy biến theo ngữ cảnh.
Lợi ích khi sử dụng DOM trong lập trình web
Tạo trang web tương tác
DOM giúp JavaScript xây dựng các tính năng động (interactive) như dropdown, modal, animation, form tự động kiểm tra… mang đến trải nghiệm website hiện đại.
Cải thiện trải nghiệm người dùng
Việc thay đổi nội dung theo thời gian thực giúp người dùng nhận phản hồi nhanh hơn, thao tác mượt mà hơn mà không cần tải lại toàn bộ trang.
Tăng tính linh hoạt trong phát triển
Lập trình viên có toàn quyền kiểm soát nội dung, cấu trúc và hành vi của trang web — giúp việc xây dựng tính năng mới trở nên dễ dàng.
Dễ bảo trì và mở rộng
Mọi thành phần của trang web được tổ chức dưới dạng cây DOM, giúp việc cập nhật, chỉnh sửa hoặc thêm mới trở nên rõ ràng, nhanh chóng và ít lỗi 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.
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
Bizfly Cloud là nhà cung cấp dịch vụ điện toán đám mây với chi phí thấp, được vận hành bởi VCCorp.
Bizfly Cloud là một trong 4 doanh nghiệp nòng cốt trong "Chiến dịch thúc đẩy chuyển đổi số bằng công nghệ điện toán đám mây Việt Nam" của Bộ TT&TT; đáp ứng đầy đủ toàn bộ tiêu chí, chỉ tiêu kỹ thuật của nền tảng điện toán đám mây phục vụ Chính phủ điện tử/chính quyền điện tử.
Độc giả quan tâm đến các giải pháp của Bizfly Cloud có thể truy cập tại đây.
DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud
