Table of contents
Open Table of contents
1. Cấu trúc cây DOM (DOM Tree)
Hãy tưởng tượng trang web của bạn là một cái cây:
- Gốc là đối tượng
document. - Các nhánh là các thẻ HTML như
<html>,<body>,<div>. - Các lá là văn bản hoặc thuộc tính bên trong các thẻ đó.
2. Tìm kiếm các phần tử HTML
Để điều khiển một phần tử, trước tiên bạn phải tìm ra nó.
getElementById(id): Tìm phần tử theo ID duy nhất.getElementsByTagName(name): Tìm theo tên thẻ (nhưp,div).getElementsByClassName(name): Tìm theo tên Class.
const element = document.getElementById("myTitle");3. Thay đổi nội dung và kiểu dáng (CSS)
Thay đổi nội dung:
Sử dụng thuộc tính .innerHTML để thay đổi toàn bộ mã HTML bên trong, hoặc .innerText để chỉ thay đổi văn bản.
document.getElementById("demo").innerHTML = "Chào mừng bạn!";Thay đổi thuộc tính (Attribute):
document.getElementById("myImage").src = "landscape.jpg";Thay đổi CSS:
Sử dụng thuộc tính .style.
document.getElementById("demo").style.color = "blue";
document.getElementById("demo").style.fontSize = "30px";4. Lắng nghe sự kiện (EventListener)
Đây là cách bạn làm cho trang web tương tác với người dùng. Các sự kiện phổ biến: click, mouseover, keydown, submit.
const btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
alert("Bạn vừa nhấn nút!");
});5. Thêm/Xóa phần tử mới
Bạn có thể tự tay “xây dựng” thêm các phần tử HTML bằng JavaScript.
// Tạo một thẻ <p> mới
const para = document.createElement("p");
para.innerText = "Đây là văn bản mới được thêm vào.";
// Gắn vào body
document.body.appendChild(para);Lời kết Module 10
DOM chính là cầu nối giữa mã lệnh JavaScript khô khan và giao diện web sống động mà người dùng nhìn thấy. Hiểu rõ DOM là bạn đã thực sự bắt đầu hành trình trở thành một Web Developer chuyên nghiệp.
Trong Module 11, chúng ta sẽ quay lại với Mảng nhưng ở một cấp độ cao hơn: Các phương thức duyệt mảng hiện đại (Map, Filter, Reduce).
Hẹn gặp lại các bạn!