Sau khi hiểu JavaScript là gì, chúng ta sẽ đi sâu vào phần quan trọng nhất khiến trang web trở nên tương tác: DOM và Event.

DOM giúp JavaScript “nhìn thấy” và thay đổi cấu trúc HTML, còn Event giúp bắt các hành động của người dùng như click, nhập liệu…

Cấu trúc cây DOM của một trang HTML đơn giản (Nguồn: W3Schools)

DOM là gì?

Document Object Model (Mô hình Đối tượng Tài liệu) là cách trình duyệt biểu diễn trang HTML dưới dạng cây đối tượng.

  • Mỗi thẻ HTML là một node (nút).
  • JavaScript có thể truy cập, thêm, sửa, xóa các node này.

Ví dụ: Thẻ <h1> trở thành một object mà bạn có thể thay đổi nội dung.

Các phương thức DOM phổ biến

Phương thứcMô tảVí dụ
document.getElementById()Lấy phần tử theo IDdocument.getElementById("title")
document.querySelector()Lấy phần tử đầu tiên khớp CSS selectordocument.querySelector(".button")
element.innerHTMLĐọc/ghi nội dung HTML bên trongelement.innerHTML = "<strong>Mới</strong>"
element.textContentĐọc/ghi chỉ text (an toàn hơn)element.textContent = "Hello"
element.style.propertyThay đổi CSS inlineelement.style.color = "red"
document.createElement()Tạo phần tử mớilet btn = document.createElement("button")

Ví dụ trước/sau khi thao tác DOM (Nguồn: Medium)

Event là gì và cách xử lý

Event là các sự kiện xảy ra trên trang: click chuột, nhấn phím, load trang, submit form…

JavaScript có thể lắng nghe (listen) và phản hồi các event này.

Cách thêm Event Listener

1
2
3
4
5
6
7
8
9

// Cách hiện đại (khuyến nghị)
element.addEventListener("click", function() {
    alert("Bạn đã click!");
});

// Hoặc dùng arrow function
element.addEventListener("click", () => {
    console.log("Click rồi!");
});