DOM là gì? Giải thích dễ hiểu cho Web Developer và cách thao tác DOM hiệu quả

Nếu bạn là web developer, đặc biệt là người làm việc với JavaScript, chắc chắn bạn đã nghe rất nhiều về DOM. Nhưng DOM là gì, tại sao tất cả các framework — từ React, Vue, Svelte đến Astro — đều phải làm việc với nó? DOM thực sự đóng vai trò như thế nào trong việc hiển thị website?

Trong bài viết này, chúng ta sẽ cùng tìm hiểu DOM theo cách dễ hiểu – thực tế – hiện đại, giúp bạn nắm vững nền tảng để làm chủ frontend development.

1. DOM là gì?

DOM (Document Object Model) là một mô hình dạng cây mô tả toàn bộ cấu trúc của một trang web. Khi trình duyệt tải HTML, nó sẽ chuyển toàn bộ tài liệu đó thành một cây các đối tượng (nodes) mà JavaScript có thể truy cập và thao tác.

Nói cách khác:

➡️ HTML là tài liệu
➡️ DOM là phiên bản “sống” của tài liệu đó trong trình duyệt
➡️ JavaScript là công cụ để tương tác với DOM

Ví dụ, đoạn HTML:

<div id="app">
  <h1>Hello World</h1>
  <button>Click me</button>
</div>

Khi vào DOM, nó trở thành một cây cấu trúc:

Document
 └── html
     └── body
         └── div#app
             ├── h1
             └── button

DOM giúp JavaScript có thể:

• Lấy phần tử (querySelector)

• Thay đổi nội dung (innerText, innerHTML)

• Sửa style hoặc class

• Tạo mới phần tử (createElement)

• Lắng nghe sự kiện (addEventListener)

2. DOM hoạt động như thế nào?

2.1 Trình duyệt chuyển HTML → DOM

Quá trình diễn ra như sau:

1. Trình duyệt nhận file HTML.

2. Trình duyệt phân tích cú pháp (parse).

3. Mỗi thẻ → trở thành node trong DOM.

4. DOM được tạo xong và hiển thị trên màn hình.

DOM này hoạt động theo thời gian thực (live structure), nghĩa là:

• Bạn thay đổi DOM bằng JavaScript → trang thay đổi ngay lập tức.

• Trình duyệt cập nhật UI dựa trên DOM hiện tại.

3. Các loại node trong DOM

DOM không chỉ có element (thẻ HTML). Nó bao gồm nhiều loại node khác nhau:

3.1 Element Node

Đại diện cho các thẻ HTML (div, p, section,…).

3.2 Text Node

Đại diện cho nội dung văn bản trong thẻ.

3.3 Attribute Node

Đại diện cho thuộc tính (id, class, src…).

3.4 Comment Node

Đại diện cho comment trong HTML.

Mô hình này giúp trình duyệt linh hoạt trong thao tác và cập nhật.

4. Cách thao tác DOM bằng JavaScript

4.1 Lấy phần tử trong DOM

querySelector (phổ biến nhất):

const btn = document.querySelector("button");

Lấy theo id:

const app = document.getElementById("app");

Lấy nhiều phần tử:

const items = document.querySelectorAll(".item");

4.2 Thay đổi nội dung

title.innerText = "New Title";
content.innerHTML = "<strong>Bold text</strong>";

4.3 Thay đổi style hoặc class

box.style.backgroundColor = "red";
box.classList.add("active");

4.4 Tạo mới phần tử

const newEl = document.createElement("p");
newEl.innerText = "Hello DOM!";
document.body.appendChild(newEl);

4.5 Lắng nghe sự kiện

button.addEventListener("click", () => {
  alert("Clicked!");
});

5. DOM và hiệu suất (performance)

DOM rất mạnh nhưng không phải lúc nào cũng nhanh. Mỗi lần DOM thay đổi, trình duyệt phải:

• Reflow: tính toán lại vị trí các phần tử

• Repaint: vẽ lại giao diện

Điều này có thể gây giật lag nếu thao tác quá nhiều.

Các mẹo tối ưu DOM

• Hạn chế chỉnh DOM trong vòng lặp.

• Gom nhiều thay đổi vào một lần cập nhật.

• Dùng documentFragment khi tạo nhiều phần tử.

• Hạn chế đọc/ghi style liên tục.

6. DOM trong các framework hiện đại

Bạn có thể nghĩ rằng React, Vue, Svelte… không làm việc với DOM, nhưng thực tế chúng đều dựa trên DOM.

Điểm khác biệt là:

React / Vue

➡️ Dùng Virtual DOM để tối ưu cập nhật
➡️ Chỉ cập nhật phần nào thực sự thay đổi

Svelte

➡️ Compile-time, tạo code thao tác DOM siêu tối ưu

Astro

➡️ DOM được xử lý tối thiểu (partial hydration)
➡️ Chỉ kích hoạt JavaScript khi thật sự cần

Vanilla JavaScript

➡️ Bạn thao tác DOM trực tiếp.

7. Ví dụ thực tế: Counter bằng DOM

Ví dụ minh họa sự tương tác trực tiếp DOM:

<div id="counter">0</div>
<button id="increase">Tăng</button>

const counter = document.getElementById("counter");
const btn = document.getElementById("increase");

let value = 0;

btn.addEventListener("click", () => {
  value++;
  counter.innerText = value;
});

8. Lỗi phổ biến khi làm việc với DOM

❌ Truy cập DOM trước khi nó render xong

Cách khắc phục:

document.addEventListener("DOMContentLoaded", () => {
  // Code DOM ở đây
});

❌ Lạm dụng innerHTML gây mất an toàn

Dễ dính XSS nếu chèn input người dùng.

❌ Tạo quá nhiều event listener

→ gây rò rỉ bộ nhớ, giảm FPS.

9. DOM không phải HTML

Đây là hiểu lầm phổ biến.

• HTML là file tĩnh.

• DOM là phiên bản động đã được trình duyệt tạo ra.

Bạn có thể thay đổi DOM nhưng file HTML gốc vẫn không thay đổi.

10. DOM trong thời đại Astro và islands architecture

Với các framework đời mới như Astro, bạn không cần thao tác DOM toàn trang.

Astro dùng mô hình:

• HTML tĩnh

• Chỉ load JavaScript tại “islands” (khu vực có tương tác)

• Giảm JS, tăng tốc độ

Nhưng ở cấp độ thấp hơn, khi cần tương tác, bạn vẫn phải hiểu DOM.

DOM chính là nền tảng mà mọi công nghệ frontend đều xây trên đó.

11. Kết luận

DOM là trái tim của trình duyệt, là cách mà HTML được “sống lại” và trở thành giao diện có thể tương tác.

Hiểu DOM giúp bạn:

• viết JavaScript hiệu quả hơn

• hiểu cách hoạt động của các framework

• tối ưu hiệu suất

• xử lý UI nhanh và chính xác

Nếu bạn đang học frontend, DOM là kiến thức bắt buộc.

💬 Call-to-Action

Nếu bạn muốn mình viết thêm các bài nâng cao như:

• DOM Events sâu hơn

• Virtual DOM hoạt động ra sao

• So sánh DOM trực tiếp vs React vs Astro