DOM là gì?
DOM (Document Object Model) là “bản đồ” của trang web mà trình duyệt tạo ra từ HTML. Mỗi thẻ HTML trở thành một object (node) trong DOM. JavaScript dùng DOM để đọc, sửa, thêm, xoá bất kỳ phần tử nào — và trang cập nhật ngay lập tức.
// File: dom.js
// Chọn phần tử
const title = document.querySelector("h1")
const allCards = document.querySelectorAll(".card")
// Đọc nội dung
console.log(title.textContent) // "Xin chào"
// Sửa nội dung
title.textContent = "Chào mừng bạn!"
// Sửa style
title.style.color = "#6c5ce7"
// Thêm class
title.classList.add("highlight")
Chọn phần tử: querySelector vs getElementById
| Phương thức | Cú pháp | Trả về |
|---|---|---|
querySelector() | CSS selector bất kỳ | 1 phần tử đầu tiên khớp |
querySelectorAll() | CSS selector bất kỳ | NodeList tất cả phần tử khớp |
getElementById() | ID (không cần #) | 1 phần tử duy nhất |
getElementsByClassName() | Class name | HTMLCollection (live) |
💡 Luôn dùng querySelector
querySelector linh hoạt nhất vì nhận CSS selector (class, id, attribute, lồng nhau…). getElementById chỉ dùng khi cần tốc độ tuyệt đối. querySelectorAll dùng khi cần lấy nhiều phần tử.
Tạo và thêm phần tử mới
Dùng document.createElement() tạo thẻ mới, đặt nội dung, rồi gắn vào DOM bằng appendChild() hoặc append().
// File: create.js
// Tạo một thẻ <li> mới
const li = document.createElement("li")
li.textContent = "Mục mới"
li.classList.add("todo-item")
// Gắn vào danh sách
const list = document.querySelector("#todoList")
list.appendChild(li)
// Hoặc dùng innerHTML (nhanh nhưng cẩn thận XSS)
list.innerHTML += "<li>Mục khác</li>"
⚠ innerHTML vs createElement
innerHTML nhanh gọn nhưng nguy hiểm: nếu dữ liệu đến từ người dùng, hacker có thể chèn script (XSS). Với dữ liệu tin cậy, innerHTML OK. Với input người dùng, luôn dùng textContent hoặc createElement.
❓ document.querySelector(".card:first-child") trả về gì?
- Giải thích được DOM là gì
- Chọn phần tử bằng querySelector
- Sửa được textContent, style, classList
- Tạo và thêm phần tử mới vào DOM