DOM (Mô Hình Đối Tượng Tài Liệu)

Mô Hình Đối Tượng Tài Liệu (DOM) là một giao diện lập trình đại diện cho cấu trúc của tài liệu HTML hoặc XML dưới dạng một cây đối tượng. Nó cho phép các kịch bản và chương trình truy cập, sửa đổi và thao tác động động các phần tử, thuộc tính và nội dung trong một trang web. DOM đóng vai trò như một cầu nối giữa các tài liệu web và các ngôn ngữ lập trình như JavaScript, cho phép trải nghiệm web tương tác và động.

Còn được gọi là : Cây DOM, Mô hình tài liệu

So sánh

DOM vs. HTML : HTML là đánh dấu tĩnh của một trang web, trong khi DOM đại diện cho phiên bản có cấu trúc và tương tác của tài liệu.

DOM vs. Virtual DOM : Virtual DOM (được sử dụng trong các framework như React) là bản sao nhẹ của DOM thực, tối ưu hóa việc cập nhật và hiệu suất.

Ưu điểm

• Cho phép cập nhật nội dung động mà không cần tải lại trang.

• Cung cấp quyền truy cập có cấu trúc đến các phần tử cho lập trình và tự động hóa.

• Được hỗ trợ trên tất cả các trình duyệt và công nghệ web hiện đại.

Nhược điểm

• Việc thao tác trực tiếp với DOM có thể chậm và không hiệu quả đối với các tài liệu lớn.

• Các cập nhật thường xuyên cho DOM có thể gây ra nút cổ chai hiệu suất.

• Cấu trúc DOM phức tạp có thể dẫn đến việc gỡ lỗi và bảo trì khó khăn.

Ví dụ

Một nhà phát triển muốn thay đổi văn bản của một nút khi nó được nhấp. Sử dụng JavaScript và DOM, họ có thể đạt được điều này một cách động:

document.getElementById("myButton").addEventListener("click", function() {
    this.textContent = "Đã nhấp!";
});

Trong ví dụ này, khi nút có ID myButton được nhấp, nội dung văn bản của nó thay đổi thành "Đã nhấp!". Điều này chứng minh cách mà DOM cho phép tương tác thời gian thực với các phần tử trang web.