🌳 DOM là gì?#
DOM (Document Object Model) là một API cho phép JavaScript tương tác với HTML. Khi trình duyệt tải trang web, nó tạo ra một “cây đối tượng” từ HTML của bạn.
Ví dụ HTML:#
<html>
<head>
<title>Trang của tôi</title>
</head>
<body>
<h1>Chào bạn</h1>
<p id="greeting">Đây là một trang web.</p>
</body>
</html>
🔍 Bước 1: Truy vấn (Query)#
Các phương thức truy vấn:#
- Theo ID (Nhanh nhất):
const element = document.getElementById("greeting");
- Theo CSS Selector (Linh hoạt nhất):
const heading = document.querySelector("h1");
const firstParagraph = document.querySelector(".my-class");
const allParagraphs = document.querySelectorAll("p");
✨ Bước 2: Thao tác (Manipulation)#
Thay đổi nội dung:#
// Thay đổi text
element.textContent = "Nội dung mới!";
// Thay đổi HTML (cẩn thận XSS)
element.innerHTML = "<strong>Nội dung</strong> mới!";
Thay đổi thuộc tính:#
const img = document.querySelector("img");
img.src = "new-image.jpg";
img.setAttribute("alt", "Mô tả mới");
Thao tác với classes:#
element.classList.add("active");
element.classList.remove("inactive");
element.classList.toggle("visible");
👂 Bước 3: Lắng nghe (Listen)#
Xử lý sự kiện:#
const button = document.querySelector("#myButton");
button.addEventListener("click", function (event) {
// Ngăn hành vi mặc định
event.preventDefault();
// Thực hiện thao tác
const greeting = document.getElementById("greeting");
greeting.textContent = "Bạn đã click!";
});
🎯 Tổng kết#
- DOM: Cây đối tượng biểu diễn HTML
- Query:
getElementById,querySelectorđể tìm phần tử - Manipulate: Thay đổi nội dung, thuộc tính, style
- Listen:
addEventListenerđể phản hồi tương tác