DOM & sự kiện

Khi tải trang, trình duyệt đọc HTML và dựng nên DOM - một cây object, mỗi thẻ là một node. JavaScript dùng đối tượng document để đọc và sửa cây đó; sửa tới đâu, trang đổi tới đó (không cần tải lại).

// HTML:  <h1 id="tieu-de">Chao</h1>

const h1 = document.getElementById("tieu-de");
console.log(h1.textContent);    // "Chao"

h1.textContent = "Xin chao!";   // sua cay -> trang doi NGAY

• ▸DOM = cây object trình duyệt dựng từ HTML; mỗi thẻ là một node.
• ▸document là gốc để truy cập mọi phần tử.
• ▸Sửa DOM bằng JS → giao diện cập nhật sống động, không tải lại trang.

Bộ đôi querySelector / querySelectorAll dùng cú pháp CSS selector quen thuộc; getElementById nhanh khi tra theo id.

document.querySelector("#tieu-de");    // dau tien khop (id)
document.querySelector(".the-item");   // dau tien khop (class)
document.querySelectorAll("li");       // NodeList: TAT CA <li>
document.getElementById("tieu-de");    // nhanh, theo id

const items = document.querySelectorAll(".the-item");
items.forEach((el) => console.log(el.textContent));

• ▸querySelector(css): phần tử ĐẦU TIÊN khớp; querySelectorAll(css): NodeList tất cả.
• ▸NodeList lặp bằng forEach (hoặc spread thành mảng để map/filter).
• ▸getElementById(id): nhanh, chỉ theo id.

Đổi nội dung bằng textContent (an toàn) hoặc innerHTML (phân tích HTML); đổi lớp bằng classList; và dựng phần tử mới bằng createElement + append.

el.textContent = "van ban an toan";
el.innerHTML = "<b>in dam</b>";    // phan tich HTML - coi chung XSS!
el.classList.add("active");
el.classList.toggle("hidden");
el.setAttribute("href", "/trang");
const ten = input.value;            // doc gia tri o input

// tao & gan phan tu moi:
const li = document.createElement("li");
li.textContent = "muc moi";
document.querySelector("ul").append(li);   // gan vao cay
li.remove();                                // bo khoi cay

• ▸textContent: văn bản thuần (an toàn). innerHTML: HTML (mạnh nhưng rủi ro XSS).
• ▸classList.add/remove/toggle để bật/tắt lớp CSS; setAttribute đổi thuộc tính.
• ▸createElement + append để dựng, .remove() để bỏ; input.value đọc dữ liệu nhập.

Trang tương tác nhờ sự kiện: click, nhập liệu, submit, gõ phím… addEventListener gắn một hàm xử lý; hàm đó nhận một đối tượng event chứa thông tin về sự kiện.

const btn = document.querySelector("#nut");
btn.addEventListener("click", (event) => {
  console.log("da bam!", event.target);   // phan tu bi bam
});

// chan hanh vi mac dinh (vd form reload trang):
form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("xu ly bang JS, khong reload");
});

• ▸addEventListener("loại", handler): gắn được nhiều handler, tách JS khỏi HTML.
• ▸event.target = phần tử kích hoạt; event.preventDefault() chặn hành vi mặc định.
• ▸Sự kiện hay dùng: click, input, submit, keydown, change.

Sau khi xảy ra ở phần tử trong cùng, sự kiện nổi bong bóng (bubble) lên cha, ông… Mặc định handler chạy ở pha bubble (trong → ngoài); pha capture (ngoài → trong) là tuỳ chọn. Bấm “Con” để xem thứ tự:

// Nho bubble: bam <li> con cung kich hoat handler cua <ul> cha.
// -> gan MOT listener o cha, xu ly moi con qua event.target:
ul.addEventListener("click", (e) => {
  if (e.target.matches("li")) {
    console.log("bam vao:", e.target.textContent);
  }
});

• ▸Mặc định: sự kiện bubble từ trong ra ngoài; capture (opt-in) thì ngoài vào trong.
• ▸Event delegation: gắn một listener ở cha, xử lý mọi con qua event.target.
• ▸Rất tiện cho danh sách có phần tử thêm/bớt động (khỏi gắn lại từng cái).