DOM trong JavaScript: Cách thao tác HTML bằng JS
Bạn đã học HTML/CSS và tạo được trang web tĩnh — nhưng mọi thứ vẫn "đứng yên", không có tương tác. DOM (Document Object Model) là cầu nối để JavaScript đọc và chỉnh sửa HTML, biến trang web từ nội dung tĩnh thành giao diện sống động.
Sau bài này, bạn sẽ biết cách thay đổi nội dung trang, xử lý sự kiện click, và tự xây dựng một To-Do List đơn giản.
DOM là gì?
DOM là cấu trúc dữ liệu dạng cây (tree) mà trình duyệt tạo ra khi đọc HTML. JavaScript làm việc với cây này để cập nhật trang mà không cần tải lại.
document
└── html
├── head
│ └── title → "Trang của tôi"
└── body
├── h1 → "Xin chào"
└── p → "Đây là đoạn văn"Mỗi thẻ HTML là một "nút" (node). JavaScript có thể truy cập và sửa bất kỳ nút nào — thay đổi sẽ hiện ngay trên trang mà không cần reload.
Chọn phần tử HTML
querySelector — Cách được khuyến dùng nhất
// Cú pháp giống CSS selector
const title = document.querySelector("h1");
const btn = document.querySelector(".btn-primary"); // theo class
const input = document.querySelector("#username"); // theo id
console.log(title.textContent); // "Xin chào"Nếu bạn đã quen CSS, cú pháp này rất quen thuộc — dùng được ngay.
querySelectorAll — Chọn nhiều phần tử
const allParagraphs = document.querySelectorAll("p");
allParagraphs.forEach(p => {
console.log(p.textContent);
});getElementById — Khi cần tốc độ
const element = document.getElementById("myDiv");Ưu tiên dùng querySelector — linh hoạt hơn và cú pháp nhất quán.
Thay đổi nội dung và style
innerHTML và textContent
const box = document.querySelector("#content");
// innerHTML: đặt cả thẻ HTML bên trong
box.innerHTML = "Chữ đậm";
// textContent: chỉ text thuần túy — dùng khi hiển thị dữ liệu người dùng
box.textContent = "Chỉ là text bình thường";Khi hiển thị dữ liệu từ người dùng, luôn dùng textContent để tránh lỗ hổng XSS.
Thay đổi style trực tiếp
const box = document.querySelector(".box");
box.style.backgroundColor = "red"; // background-color → camelCase
box.style.fontSize = "20px";
box.style.display = "none"; // Ẩn phần tửclassList — Cách được khuyến dùng
const btn = document.querySelector("button");
btn.classList.add("active"); // Thêm class
btn.classList.remove("active"); // Xóa class
btn.classList.toggle("active"); // Có thì xóa, không có thì thêm
btn.classList.contains("active"); // Kiểm tra: true/falseDùng classList thay vì style trực tiếp để giữ CSS ở file CSS và JS ở file JS — code sạch hơn.
Xử lý sự kiện với addEventListener
// Cú pháp cơ bản
element.addEventListener("tên-sự-kiện", hàm-xử-lý);// Nút đổi màu nền
const button = document.querySelector("#changeColorBtn");
button.addEventListener("click", () => {
document.body.style.backgroundColor = "lightblue";
});
// Theo dõi input
const input = document.querySelector("#nameInput");
input.addEventListener("input", (event) => {
console.log("Đang nhập:", event.target.value);
});Các sự kiện phổ biến
| Sự kiện | Khi nào xảy ra |
|---|---|
click | Nhấp chuột |
input | Thay đổi trong input field |
submit | Submit form |
keydown | Nhấn phím |
mouseover | Di chuột vào phần tử |
load | Trang đã tải xong |
Tạo và xóa phần tử
// Tạo phần tử mới
const newDiv = document.createElement("div");
newDiv.textContent = "Phần tử mới";
newDiv.classList.add("new-item");
// Thêm vào trang
document.querySelector("#container").appendChild(newDiv);
// Xóa phần tử
document.querySelector(".old-item").remove();Dự án thực hành: To-Do List
Copy đoạn code này vào file HTML và chạy thử:
<!DOCTYPE html>
<html>
<head><title>To-Do List</title></head>
<body>
<h1>Danh sách công việc</h1>
<input type="text" id="todoInput" placeholder="Nhập công việc...">
<button id="addBtn">Thêm</button>
<ul id="todoList"></ul>
<script>
const input = document.querySelector("#todoInput");
const addBtn = document.querySelector("#addBtn");
const list = document.querySelector("#todoList");
addBtn.addEventListener("click", () => {
if (input.value.trim() === "") return;
const li = document.createElement("li");
li.textContent = input.value;
list.appendChild(li);
input.value = "";
});
</script>
</body>
</html>Ví dụ này bao gồm đầy đủ: querySelector chọn phần tử, addEventListener xử lý click, createElement tạo thẻ mới, appendChild thêm vào danh sách.
Câu hỏi thường gặp
DOM và HTML khác nhau thế nào?
HTML là file text. DOM là cấu trúc object mà trình duyệt tạo ra từ HTML để JavaScript làm việc. Thay đổi DOM không thay đổi file HTML gốc.
querySelector hay getElementById nên dùng cái nào?
Nên dùng querySelector. Linh hoạt hơn, cú pháp giống CSS, và là cách hiện đại nhất.
React có cần thao tác DOM trực tiếp không?
React dùng Virtual DOM — bạn không cần thao tác DOM trực tiếp. Nhưng hiểu DOM là nền tảng quan trọng trước khi học React.
Bước tiếp theo: Async/Await trong JavaScript — học cách lấy dữ liệu từ API và cập nhật giao diện.
