Bài 6. DOM và sự kiện

Khái niệm và lý thuyết

DOM (Document Object Model) biểu diễn trang HTML thành cây các nút: mỗi thẻ là một nút, có nút cha, nút con, nút anh em. JavaScript truy cập cây này qua đối tượng document để tìm phần tử, đọc và sửa nội dung, thuộc tính, kiểu dáng.

Lập trình hướng sự kiện: thay vì chạy tuần tự, chương trình "chờ" các sự kiện (click, nhập phím, gửi biểu mẫu, tải xong) và chạy hàm xử lý tương ứng. Khi sự kiện xảy ra trên một phần tử, nó nổi bọt (bubbling) lên các phần tử cha. Nhờ vậy ta có thể gắn một bộ lắng nghe ở phần tử cha để xử lý cho cả danh sách con, kể cả con được thêm sau này (event delegation).

Quy tắc quan trọng: tách việc. Dùng class để đổi giao diện (CSS lo hình thức) thay vì sửa style từng thuộc tính.

Chọn phần tử

const tieuDe = document.querySelector("h1");
const cacNut = document.querySelectorAll(".nut");
const o = document.getElementById("ten");

Thay đổi trang

tieuDe.textContent = "Tiêu đề mới";
tieuDe.classList.add("noi-bat");
tieuDe.style.color = "green";
o.setAttribute("placeholder", "Nhập tên");

Sự kiện

const nut = document.querySelector("#nut");
nut.addEventListener("click", () => {
  alert("Đã bấm");
});

document.querySelector("#ten").addEventListener("input", e => {
  console.log(e.target.value);
});

Ví dụ: nút bấm đếm số lần nhấn

<button id="nut">Nhấn tôi</button>
<p id="kq">0</p>
<script>
  let dem = 0;
  const nut = document.querySelector("#nut");
  const kq = document.querySelector("#kq");
  nut.addEventListener("click", () => {
    dem++;
    kq.textContent = dem;
  });
</script>

Ba bước quen thuộc của mọi tương tác: chọn phần tử, lắng nghe sự kiện, thay đổi giao diện. Hiểu ba bước này bạn đã làm được hầu hết các hiệu ứng trên trang web.

Tạo phần tử động

const li = document.createElement("li");
li.textContent = "Việc mới";
document.querySelector("ul").appendChild(li);
li.remove();

<input id="o"><button id="them">Thêm</button><ul id="ds"></ul>

const ds = document.querySelector("#ds");
document.querySelector("#them").onclick = () => {
  const o = document.querySelector("#o");
  if (!o.value.trim()) return;
  const li = document.createElement("li");
  li.textContent = o.value;
  ds.appendChild(li);
  o.value = "";
};
ds.addEventListener("click", e => e.target.remove());