Bài 6. DOM và sự kiện – Tương tác với người dùngv

Chúng ta đã đến Bài 6, nơi bạn sẽ kết nối logic JavaScript với giao diện HTML thực sự. Đây là một bài học “bẻ khóa” cho mọi người mới học lập trình web – vì từ đây, bạn có thể khiến web của mình phản ứng khi người dùng click, nhập, rê chuột… nói chung là sống động như một ứng dụng thực thụ!

Bạn còn nhớ bài trước mình đã dùng alert() hoặc console.log() để hiển thị thông tin chứ? Nhưng thú thật mà nói, vậy thì… chán quá. Website hiện đại không thể thiếu sự tương tác:

• Bấm nút thì đổi màu
• Nhập tên thì hiện lời chào
• Gõ sai thì báo lỗi
• Click vào ảnh thì phóng to

Tất cả đều cần đến 2 yếu tố:
DOM (Document Object Model) và Sự kiện (Events).

---

Mục tiêu bài học

• Hiểu DOM là gì, tại sao cần làm việc với DOM
• Biết cách truy cập, thay đổi nội dung HTML bằng JavaScript
• Làm việc với các sự kiện phổ biến: click, input, mouseover
• Biết cách thêm/xóa class, thay đổi CSS bằng JS
• Làm mini demo tương tác với người dùng

---

1. DOM là gì?

DOM = Document Object Model
Nó là cây phân cấp đại diện cho toàn bộ trang HTML của bạn.

Ví dụ, HTML này:

📋 Copy<h1>Xin chào</h1>
<p id="intro">Chào mừng bạn đến với website</p>

… sẽ được trình duyệt chuyển thành một cấu trúc cây (tree) mà JavaScript có thể truy cập được.

Nhờ DOM, bạn có thể:

• truy cập phần tử (element)
• thay đổi nội dung
• thay đổi màu sắc
• ẩn/hiện phần tử
• tạo mới hoặc xóa phần tử

---

2. Truy cập phần tử HTML bằng JavaScript

Các cách thường dùng:

📋 Copydocument.getElementById("ten-id");
document.getElementsByClassName("ten-class"); // dạng mảng
document.getElementsByTagName("p"); // lấy theo thẻ
document.querySelector("div.box"); // linh hoạt hơn
document.querySelectorAll("ul li"); // lấy nhiều phần tử

Ví dụ:

📋 Copy<p id="ten">Tuấn</p>

📋 Copylet p = document.getElementById("ten");
console.log(p.innerText); // in ra: Tuấn

---

3. Thay đổi nội dung HTML bằng JS

📋 Copylet p = document.getElementById("ten");
p.innerText = "Ngọc"; // thay đổi nội dung văn bản
p.style.color = "red"; // đổi màu chữ
p.style.fontSize = "24px"; // thay đổi kích thước

Bạn cũng có thể thêm hoặc xóa class:

📋 Copyp.classList.add("highlight");
p.classList.remove("highlight");
p.classList.toggle("highlight");

---

4. Xử lý sự kiện (Events)

Sự kiện là mọi hành động xảy ra trên trang:
Người dùng click, di chuột, nhập text, cuộn chuột, nhấn phím, v.v.

Thêm sự kiện bằng JS:

📋 Copylet btn = document.getElementById("nut-bam");

btn.addEventListener("click", function () {
  alert("Bạn vừa bấm nút!");
});

---

5. Ví dụ 1: click để đổi màu

HTML:

📋 Copy<button id="doi-mau">Đổi màu nền</button>

JS:

📋 Copylet nut = document.getElementById("doi-mau");

nut.addEventListener("click", function () {
  document.body.style.backgroundColor = "#ffe4b5";
});

---

6. Ví dụ 2: nhập tên, hiện lời chào

HTML:

📋 Copy<input type="text" id="ten" placeholder="Nhập tên bạn..." />
<button id="chao">Chào</button>
<p id="loi-chao"></p>

JS:

📋 Copylet input = document.getElementById("ten");
let nut = document.getElementById("chao");
let hienthi = document.getElementById("loi-chao");

nut.addEventListener("click", function () {
  let ten = input.value;
  hienthi.innerText = "Xin chào, " + ten + "!";
});

Đây chính là bước đầu để làm form liên hệ, form tính toán, form đăng ký…

---

7. Sự kiện phổ biến bạn nên biết

Sự kiện	Khi nào xảy ra
click	người dùng click vào phần tử
input	khi người dùng nhập vào ô input
mouseover	khi rê chuột vào
mouseout	khi rời chuột đi
keydown	khi nhấn phím
submit	khi submit form

Bạn có thể thử:

📋 Copyinput.addEventListener("input", function () {
  console.log("Đang gõ:", input.value);
});

---

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

1. Tạo trang có:
   • một ô input
   • một nút “Đổi màu”
   • một đoạn chữ
2. Khi người dùng gõ tên → hiện ra: “Chào bạn ___”
3. Khi bấm nút → đổi màu nền sang một màu ngẫu nhiên
4. Bonus:
   • Khi rê chuột vào đoạn chữ → đổi font chữ, màu
   • Khi nhấn phím “Enter” → tự động bấm nút

Gợi ý thêm: bạn có thể dùng Math.random() để tạo màu ngẫu nhiên, ví dụ:

📋 Copyfunction mauNgauNhien() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

---

Kết bài – JavaScript giờ đã thật sự “động”

Chúc mừng bạn, bạn vừa điều khiển DOM thành công
Từ đây, bạn có thể làm các ứng dụng như:

• Máy tính đơn giản
• Gửi form, kiểm tra dữ liệu nhập
• Đổi giao diện theo người dùng
• Làm mini game bằng JS

Trong bài tiếp theo, bạn sẽ làm Mini Project: Trang giới thiệu cá nhân – nơi bạn áp dụng HTML + CSS + JavaScript đã học để làm một trang thật chỉn chu và tương tác.

Hẹn gặp bạn ở Mini Project: Trang giới thiệu cá nhân