Bài 1: Giới thiệu về Trình quản lý quảng cáo

1. Tổng quan về DOM

1.1. DOM là gì?

DOM (Document Object Model) là một giao diện lập trình cho phép JavaScript tương tác với HTML và CSS. Khi một trang web được tải, trình duyệt tạo ra một mô hình cây DOM, trong đó mỗi phần tử HTML là một đối tượng (object) có thể được truy cập và thay đổi.

1.2. Cấu trúc của DOM

DOM được tổ chức theo cấu trúc cây (tree structure), ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <p class="description">Đây là một đoạn văn.</p>
</body>
</html>

Cấu trúc DOM của trang trên:

Document
 ├── <html>
 │   ├── <head>
 │   │   ├── <title>
 │   ├── <body>
 │   │   ├── <h1 id="title">
 │   │   ├── <p class="description">

2. DOM trong JavaScript

JavaScript có nhiều phương thức để thao tác với DOM, bao gồm truy xuất, thay đổi nội dung, thay đổi thuộc tính, thêm/xóa phần tử.

2.1. Truy xuất phần tử

document.getElementById("title"); // Truy xuất phần tử theo ID
document.getElementsByClassName("description"); // Truy xuất theo class
document.getElementsByTagName("p"); // Truy xuất theo thẻ HTML
document.querySelector("p"); // Lấy phần tử đầu tiên phù hợp với bộ chọn
document.querySelectorAll("p"); // Lấy tất cả phần tử phù hợp

2.2. Thay đổi nội dung và thuộc tính

document.getElementById("title").innerHTML = "Xin chào!";
document.querySelector(".description").style.color = "red";
document.querySelector("h1").setAttribute("class", "highlight");

2.3. Thêm và xóa phần tử

// Thêm phần tử mới
let newElement = document.createElement("p");
newElement.innerText = "Đây là nội dung mới!";
document.body.appendChild(newElement);

// Xóa phần tử
let elementToRemove = document.getElementById("title");
elementToRemove.remove();

2.4. Xử lý sự kiện trong JavaScript

document.getElementById("title").addEventListener("click", function() {
    alert("Bạn vừa click vào tiêu đề!");
});

3. DOM trong jQuery

jQuery là một thư viện JavaScript giúp đơn giản hóa việc thao tác với DOM.

3.1. Truy xuất phần tử trong jQuery

$("#title"); // Truy xuất theo ID
$(".description"); // Truy xuất theo class
$("p"); // Truy xuất theo thẻ HTML

3.2. Thay đổi nội dung và thuộc tính trong jQuery

$("#title").html("Xin chào!"); // Thay đổi nội dung
$(".description").css("color", "red"); // Thay đổi CSS
$("h1").attr("class", "highlight"); // Thêm thuộc tính

3.3. Thêm và xóa phần tử trong jQuery

// Thêm phần tử mới
$("body").append("<p>Đây là nội dung mới!</p>");

// Xóa phần tử
$("#title").remove();

3.4. Xử lý sự kiện trong jQuery

$("#title").click(function() {
    alert("Bạn vừa click vào tiêu đề!");
});

3.5. So sánh JavaScript DOM và jQuery

Tiêu chí	JavaScript DOM	jQuery
Truy xuất phần tử	Dài dòng, nhiều cú pháp (`document.getElementById()`, `document.querySelector()`)	Ngắn gọn, sử dụng `$()`
Thay đổi nội dung	`element.innerHTML = "text"`	`$(selector).html("text")`
Thêm/xóa phần tử	`document.createElement()`, `appendChild()`, `remove()`	`append()`, `remove()`
Xử lý sự kiện	`element.addEventListener("click", function(){})`	`$(selector).click(function(){})`
Hỗ trợ trình duyệt	Hoạt động trực tiếp, không cần thư viện	Cần tải thư viện jQuery
Hiệu suất	Nhanh hơn, không cần thư viện bên ngoài	Dễ dùng hơn nhưng chậm hơn khi làm việc với nhiều phần tử

4. Selector trong JavaScript và jQuery

Selectors là công cụ giúp truy xuất phần tử HTML dựa vào ID, class, tag hoặc các bộ lọc phức tạp khác.

Selector	JavaScript	jQuery
ID	`document.getElementById("title")`	`$("#title")`
Class	`document.getElementsByClassName("description")`	`$(".description")`
Tag	`document.getElementsByTagName("p")`	`$("p")`
Query nâng cao	`document.querySelector("#list li")`	`$("#list li")`
Lấy tất cả	`document.querySelectorAll("p")`	`$("p")`
Phần tử đầu tiên	`document.querySelector("p")`	`$("p:first")`
Phần tử cuối cùng	`document.querySelectorAll("p")[document.querySelectorAll("p").length - 1]`	`$("p:last")`
Phần tử theo index	`document.querySelectorAll("li")[2]`	`$("li:eq(2)")`

Checklist các mục cần chuẩn bị PDF · 1.2MB

Tải xuống
Tài nguyên chính thức của Facebook Link ngoài

Mở link

Bài tập: Quản lý danh sách công việc với Checkbox

Viết một ứng dụng danh sách công việc, trong đó mỗi công việc có một checkbox. Khi chọn checkbox, công việc sẽ đổi màu xanh để đánh dấu hoàn thành.

Yêu cầu

Danh sách công việc gồm nhiều dòng, mỗi dòng có một checkbox và nội dung công việc.
Khi người dùng chọn checkbox, dòng đó đổi màu xanh (đánh dấu hoàn thành).
Khi bỏ chọn, dòng quay về màu ban đầu.
Dùng jQuery để thay đổi DOM.

Code HTML mẫu

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Danh sách công việc</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        .task { display: flex; align-items: center; margin-bottom: 10px; padding: 5px; }
        .task.completed { background-color: lightgreen; }
        .task span { margin-left: 10px; flex-grow: 1; }
    </style>
</head>
<body> 
    <h2>Danh sách công việc</h2>
    <ul id="taskList">
        <li class="task">
            <input type="checkbox" class="task-checkbox">
            <span>Học JavaScript</span>
        </li>
        <li class="task">
            <input type="checkbox" class="task-checkbox">
            <span>Làm bài tập về DOM</span>
        </li>
        <li class="task">
            <input type="checkbox" class="task-checkbox">
            <span>Hoàn thành dự án</span>
        </li>
    </ul>
    <script>
        //Viết code JS của bạn vào đây
    </script>
</body>
</html>

Giải thích

Khi chọn checkbox, .task sẽ thêm class "completed", làm đổi màu nền thành xanh.
Khi bỏ chọn, class "completed" bị loại bỏ, dòng quay lại màu cũ.
Sử dụng .closest(".task") để tìm phần tử <li> chứa checkbox và thay đổi class cho nó.