📖 Học tập

BÀI 5: JAVASCRIPT THAO TÁC VỚI HTML (DOM)

1. DOM là gì?

DOM (Document Object Model) là mô hình đối tượng của tài liệu HTML. JavaScript thông qua DOM có thể:

• Thay đổi nội dung HTML
• Thay đổi thuộc tính HTML
• Thay đổi CSS
• Bắt và xử lý sự kiện người dùng

2. Truy cập phần tử HTML

document.getElementById("id");
document.getElementsByClassName("class");
document.getElementsByTagName("tag");
    

Ví dụ:

Đổi nội dung

3. Thay đổi CSS bằng JavaScript

element.style.color = "red";
element.style.fontSize = "20px";
    

Đổi màu chữ

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

Sự kiện là các hành động của người dùng như: click, nhập liệu, di chuột...

Bấm
    

Hiển thị thông báo

5. Bài thực hành

1. Tạo một nút đổi màu nền trang
2. Tạo nút ẩn / hiện một đoạn văn
3. Tạo nút tăng giảm cỡ chữ

6. Ghi nhớ

• JavaScript làm cho website trở nên động
• DOM là cầu nối giữa JS và HTML
• Học DOM là bước rất quan trọng để làm web thực tế

Hoàn thành Bài 5 là đồng chí đã bước vào thế giới Web động 🚀