DOM là gì? Tại sao JavaScript không thể làm web nếu thiếu nó

Mỗi lần bạn click chuột, cuộn trang hay gõ một ký tự, trình duyệt phải tương tác với DOM hàng chục lần trong tích tắc. Đó là lý do hiểu DOM không còn là lựa chọn mà là bắt buộc với bất kỳ ai muốn làm web.

DOM là gì?

DOM là viết tắt của Document Object Model (Mô hình Đối tượng Tài liệu). Đây là một chuẩn do WHATWG duy trì dưới dạng Living Standard (từng do W3C chuẩn hóa), dùng để biểu diễn tài liệu HTML hoặc XML dưới dạng cấu trúc cây dữ liệu. Mỗi thành phần trong tài liệu: thẻ HTML, thuộc tính, đoạn văn bản đều được biểu diễn dưới dạng một node trong cây DOM.

Hiểu đơn giản, DOM là cầu nối giữa mã nguồn tĩnh và giao diện động. Khi trình duyệt tải một trang web, nó chuyển đổi toàn bộ HTML thành một cây DOM nằm trong bộ nhớ.

Không có DOM, JavaScript chỉ là một ngôn ngữ chạy riêng lẻ. Không thể chạm vào HTML, không thể thay đổi nội dung, không thể phản hồi người dùng.

DOM làm được tất cả những điều đó.

Tại sao DOM quan trọng với lập trình web?

Bởi vì không có DOM, JavaScript không thể tương tác với trang web. DOM làm cầu nối giữa HTML (bản thiết kế tĩnh) và JavaScript (ngôn ngữ lập trình).

Khi JS cần thay đổi nội dung, thêm phần tử mới, hoặc phản hồi hành động người dùng, tất cả đều phải đi qua DOM. Thao tác DOM là kỹ năng nền tảng của mọi frontend developer.

Dù bạn dùng framework nào như React, Vue hay Angular, tất cả đều giao tiếp với DOM theo cách riêng. Hiểu rõ DOM giúp bạn viết code hiệu quả hơn, tránh những lỗi hiệu năng không đáng có.

Cấu trúc cây DOM gồm những thành phần nào?

Cây DOM là mô hình phân cấp dạng cây, bắt đầu từ một nút gốc duy nhất. Mỗi thành phần trong tài liệu HTML trở thành một node, và các node này có quan hệ với nhau theo cấu trúc cha-con hoặc anh-em.

Cây DOM có các loại node chính. Theo DOM Level 1/2, có 4 loại:

• Document node: nút gốc, đại diện cho toàn bộ tài liệu
• Element node: đại diện cho các thẻ HTML như div, p, a, body
• Text node: chứa nội dung văn bản bên trong element

Lưu ý quan trọng: chuẩn WHATWG DOM hiện đại (DOM4, 2015) đã bỏ Attribute node riêng. Thuộc tính giờ được biểu diễn dưới dạng cặp name-value trực tiếp trên Element node.

Quan hệ giữa các node rất rõ ràng. Element cha bao quanh element con. Các element cùng cấp là anh-em. Nhìn trong DevTools của trình duyệt, bạn sẽ thấy cấu trúc cây này ngay lập tức.

Phân biệt HTML và DOM như thế nào?

Đây là nhầm lẫn phổ biến nhất của người mới bắt đầu. HTML và DOM liên quan mật thiết nhưng khác nhau về bản chất.

HTML là bản thiết kế tĩnh trên file nguồn. DOM là mô hình sống trong bộ nhớ, thay đổi được theo thời gian thực.

HTML chỉ tồn tại trong file .html hoặc .js. DOM chỉ tồn tại trong bộ nhớ trình duyệt. JS không thể sửa HTML, nhưng JS có thể sửa DOM.

DOM khác HTML trong hai trường hợp chính. Đầu tiên, trình duyệt có cơ chế xử lý lỗi HTML khi parse, tự điều chỉnh cấu trúc DOM để hiển thị trang. Thứ hai, JS thay đổi DOM sau khi trang đã tải. Kết quả: những gì người dùng thấy trên màn hình là DOM, không phải HTML gốc.

Các phương thức DOM cơ bản là gì?

JavaScript cung cấp nhiều phương thức để truy cập và thay đổi DOM. Dưới đây là những phương thức bạn sẽ dùng gần như mỗi ngày.

Để truy xuất phần tử:

• getElementById: lấy phần tử theo id duy nhất
• querySelector: lấy phần tử đầu tiên khớp CSS selector
• getElementsByClassName: lấy danh sách phần tử theo class

Để thay đổi nội dung:

• innerHTML: đọc hoặc ghi nội dung HTML
• textContent: đọc hoặc ghi nội dung văn bản thuần

Để thay đổi cấu trúc:

• createElement: tạo phần tử mới
• appendChild: thêm phần tử con vào element cha
• removeChild: xóa phần tử con khỏi element cha

Để xử lý sự kiện:

• addEventListener: lắng nghe hành động người dùng như click, input
• event.target: xác định phần tử kích hoạt sự kiện

Để quan sát thay đổi DOM:

• MutationObserver: lắng nghe thay đổi trong cây DOM (thêm/xóa node, thay đổi thuộc tính, thay đổi text). Đây là công cụ cần thiết khi làm việc với SPA và framework hiện đại.

Mỗi phương thức đều có trường hợp dùng riêng. querySelector linh hoạt nhất vì hỗ trợ CSS selector đầy đủ. getElementById nhanh nhất về mặt lý thuyết, nhưng trong ứng dụng thực tế sự khác biệt là không đáng kể, nên chọn theo ngữ nghĩa code hơn là tốc độ. innerHTML mạnh nhưng cần cẩn thận vì nguy cơ XSS (Cross-Site Scripting). Kẻ xấu có thể chèn mã độc qua nội dung HTML. Nên dùng textContent cho dữ liệu không tin cậy, hoặc dùng thư viện như DOMPurify để sanitize.

Tiêu chuẩn DOM qua các cấp độ như thế nào?

DOM không xuất hiện một lần xong. Nó được W3C chuẩn hóa qua nhiều cấp độ, mỗi cấp bổ sung tính năng mới.

Trước khi DOM được W3C chuẩn hóa, mỗi trình duyệt đã có sẵn các API DOM riêng (thường được gọi là "DOM Level 0", thuật ngữ retrospective, không phải spec chính thức). Mỗi trình duyệt implement theo cách riêng, không đồng nhất.

DOM Level 1 chuẩn hóa việc duyệt và thao tác cấu trúc cây DOM cho HTML và XML. Đây là nền tảng của mọi thao tác DOM cơ bản.

DOM Level 2 bổ sung XML namespaces và DOM Events. Sự kiện trở thành phần chính thức của DOM.

DOM Level 3 gồm 6 đặc tả ban đầu: Core, Load and Save, XPath, Views and Formatting, Requirements, Validation. Lưu ý: Load and Save và Validation đã bị W3C deprecated, chỉ Core và XPath còn được hỗ trợ rộng rãi trong trình duyệt hiện đại.

Hiểu các cấp độ này giúp bạn nhìn nhận DOM không phải là công nghệ ngẫu nhiên, mà là chuẩn được xây dựng có hệ thống.

Shadow DOM và Virtual DOM khác nhau như thế nào?

Hai khái niệm này thường bị nhầm vì đều có chữ DOM, nhưng bản chất hoàn toàn khác nhau.

Shadow DOM là công nghệ trình duyệt native, dùng để encapsulation (bao đóng). Nó giúp đóng gói CSS (style không leak ra ngoài) và retarget sự kiện, tạo nền tảng cho Web Components. Lưu ý: code JS chạy trong shadow DOM vẫn có thể truy cập global scope, window, document. Shadow DOM không cách ly JavaScript.

Virtual DOM là bản sao nhẹ của DOM thật, nằm trong bộ nhớ. React là thư viện web đầu tiên phổ biến Virtual DOM rộng rãi năm 2013 (khái niệm này đã tồn tại từ Smalltalk những năm 1980). Các framework như React và Vue dùng Virtual DOM để tối ưu hiệu suất. Khi có thay đổi, framework so sánh Virtual DOM cũ và mới, chỉ cập nhật phần thực sự thay đổi vào DOM thật.

Tóm lại: Shadow DOM là encapsulation. Virtual DOM là tối ưu hiệu năng. Hai mục đích khác nhau, không thay thế nhau.

Làm sao để bắt đầu thực hành DOM ngay?

Mở DevTools (F12) trên bất kỳ trang web nào. Chuyển sang tab Elements. Nhìn cây DOM sống động trước mắt.

Sau đó, vào tab Console. Gõ từng lệnh:

document.title
document.querySelector("h1")
document.body.style.backgroundColor = "lightblue"

Xem kết quả thay đổi ngay lập tức. Đó là cách học DOM nhanh nhất.

Tiếp theo, tạo một file HTML trống. Viết vài dòng JavaScript thao tác với DOM. Thử thêm phần tử, đổi màu, lắng nghe click. Thực hành từng bước một. Mỗi lệnh bạn gõ là một lần hiểu sâu hơn về cách web hoạt động.