1. DOM là gì?

DOM (Document Object Model) là mô hình biểu diễn toàn bộ cấu trúc của trang web dưới dạng cây (tree structure).

Mỗi thành phần trên trang như:

  • Thẻ HTML
  • Đoạn văn
  • Hình ảnh
  • Nút bấm
  • Văn bản

… đều được xem là một node (nút) trong cây DOM.

JavaScript có thể đọc - thêm - sửa - xóa các node này để thay đổi nội dung trang web theo thời gian thực (real-time).

Hiểu đơn giản: DOM = Cây cấu trúc HTML mà JavaScript có thể điều khiển.

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

Khi bạn mở trang web, trình duyệt sẽ:

  1. Đọc mã HTML
  2. Phân tích và biến nó thành một cây DOM
  3. Cho phép JavaScript truy cập và thay đổi cây DOM

Vì vậy bạn có thể dùng JS để:

  • Thay đổi text
  • Đổi màu
  • Ẩn/hiện phần tử
  • Thêm nội dung mới
  • Xóa phần tử trên trang

3. Các loại node trong DOM

Loại Node Mô Tả
Document Đại diện toàn bộ tài liệu
Element Thẻ HTML: div, p, h1, img…
Text Nội dung văn bản trong thẻ
Attribute Thuộc tính của thẻ: class, id…
Comment Ghi chú (comment) trong HTML

4. Cách chọn phần tử DOM (DOM Selectors)

4.1. querySelector & querySelectorAll - khuyên dùng 2025

const title = document.querySelector("h1");
const items = document.querySelectorAll(".item");

4.2. getElementById

document.getElementById("main");

4.3. getElementsByClassName

document.getElementsByClassName("box");

4.4. getElementsByTagName

document.getElementsByTagName("p");

5. Thao tác DOM phổ biến

5.1 Thay đổi nội dung

document.querySelector("h1").textContent = "Tiêu đề mới";

5.2 Thay đổi HTML bên trong

document.querySelector("#content").innerHTML = "<b>Nội dung được thay bằng HTML</b>";

5.3 Thay đổi thuộc tính

document.querySelector("img").src = "new-image.jpg";

5.4 Thay đổi style

document.querySelector("p").style.color = "red";

5.5 Thêm phần tử mới

const newItem = document.createElement("li");
newItem.textContent = "Item mới";
document.querySelector("ul").appendChild(newItem);

5.6 Xóa phần tử

document.querySelector(".box").remove();

6. DOM Events - xử lý sự kiện

Ví dụ: Click

document.querySelector("#btn").addEventListener("click", () => {
    alert("Bạn đã bấm nút!");
});

Một số sự kiện thông dụng

  • click
  • submit
  • change
  • keydown
  • load
  • mouseover

7. Best Practices DOM

  • Ưu tiên querySelector() và querySelectorAll()
  • Hạn chế sử dụng innerHTML (dễ gây lỗi XSS)
  • Gộp các thay đổi DOM vào cùng một thao tác để tăng hiệu năng
  • Sử dụng event delegation khi thêm nhiều sự kiện
  • Tránh thao tác DOM quá nhiều trong vòng lặp

8. Lợi ích của DOM trong JavaScript

Lợi ích Chi tiết
Tương tác thời gian thực Thay đổi nội dung không cần reload trang
Tạo trải nghiệm người dùng tốt hơn UI động, hiệu ứng mượt
Kết nối với API Hiển thị dữ liệu trả về từ server
Xây dựng ứng dụng web Nền tảng cho SPA, framework JS

9. Kết luận

DOM là nền tảng quan trọng nhất khi học JavaScript.

Nắm chắc DOM giúp bạn:

  • Hiểu cấu trúc trang web
  • Thao tác nội dung linh hoạt
  • Xử lý sự kiện chuyên nghiệp
  • Xây dựng website hiện đại 2025

Nếu bạn muốn học JavaScript bài bản, DOM chính là bước bắt buộc phải nắm vững!