DOM & Event

DOM là “cầu nối” giữa JavaScript và giao diện HTML. Nhờ DOM, JavaScript có thể đọc – thay đổi – tạo mới – xóa nội dung trên trang web theo thời gian thực.

Event (sự kiện) giúp trang web phản hồi lại thao tác người dùng như click, nhập liệu, cuộn trang,…

Tư duy cốt lõi:
“DOM để truy cập giao diện – Event để tương tác người dùng.”

---

1. DOM là gì?

DOM (Document Object Model) biến toàn bộ trang HTML thành cây các đối tượng mà JavaScript có thể truy cập.

Ví dụ HTML:

<h1 id="title">Hello</h1>

JavaScript có thể “chạm” vào nó:

document.getElementById("title");
## 2. Lấy phần tử trong HTML

### 2.1. getElementById

```js
let title = document.getElementById("title");

2.2. querySelector – linh hoạt nhất

document.querySelector(".item");  // chọn theo class
document.querySelector("#title"); // chọn theo id
document.querySelector("h1");     // chọn theo tag

2.3. querySelectorAll – chọn nhiều phần tử

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

3. Thay đổi nội dung

title.innerText = "Xin chào JavaScript!";
title.innerHTML = "<b>Xin chào!</b>";

4. Thay đổi style (CSS)

title.style.color = "red";
title.style.fontSize = "24px";

5. Thay đổi thuộc tính

let img = document.getElementById("avatar");
img.src = "img/profile.png";

6. Xử lý sự kiện (Event)

Cách phổ biến nhất: addEventListener

let btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  console.log("Button clicked!");
});
## 7. Các sự kiện thường dùng

- **click**
- **input** 
- **change**
- **keyup**
- **keydown**
- **submit**
- **mouseover**

Ví dụ sự kiện nhập liệu:

```js
let input = document.getElementById("name");

input.addEventListener("input", () => {
  console.log("Bạn đang nhập:", input.value);
});

8. Tạo mới phần tử HTML bằng JavaScript

let p = document.createElement("p");
p.innerText = "Nội dung mới";

document.body.appendChild(p);

9. Xóa phần tử

let box = document.getElementById("box");
box.remove();

10. Mini demo (rất trực quan)

HTML:

<button id="toggle">Bật/Tắt</button>
<div id="box" style="width: 100px; height: 100px; background: gray"></div>

JavaScript:

let box = document.getElementById("box");
let toggle = document.getElementById("toggle");

toggle.addEventListener("click", () => {
  if (box.style.background === "gray") {
    box.style.background = "yellow";
  } else {
    box.style.background = "gray";
  }
});

Kết quả: Click → hộp đổi màu → trải nghiệm trực tiếp cách DOM + event hoạt động.

11. Lỗi thường gặp

• Gọi JavaScript trước khi HTML load → phần tử null.
  Giải pháp: đặt <script> cuối body.
• Dùng sai selector (nhầm id/class).
• Quên remove event trong các ứng dụng phức tạp.
• Lạm dụng thay đổi DOM trong vòng lặp → chậm.

12. Bài tập thực hành

Bài 1

Tạo nút “Đổi màu chữ” → click → đổi màu chữ của thẻ <h1>.

Bài 2

Tạo ô nhập tên → hiển thị tên ra màn hình theo thời gian thực.

Bài 3

Tạo danh sách (ul) và nút “Thêm item” → click → thêm <li> mới.

Bài 4

Tạo một form đăng ký.
Khi submit, dùng JavaScript in ra thông tin người dùng mà không tải lại trang.

13. Kết luận bài học

• DOM cho phép thao tác trực tiếp với giao diện.
• Event giúp trang web phản ứng theo hành động người dùng.
• Sự kết hợp DOM + Event là nền tảng của mọi ứng dụng frontend.