- Authors
- Name
- Nguyễn Đức Xinh
- Published on
- Published on
Bài tập thực hành JavaScript DOM Selector - Từ cơ bản đến nâng cao
Bài tập thực hành JavaScript DOM Selector - Từ cơ bản đến nâng cao
Sau khi đã tìm hiểu về các phương thức DOM Selector, hãy cùng thực hành qua các bài tập từ cơ bản đến nâng cao. Các bài tập này sẽ giúp bạn nắm vững cách sử dụng DOM Selector trong thực tế.
Bài tập 1: Thay đổi màu sắc và nội dung
Yêu cầu
- Thay đổi màu chữ của tất cả các tiêu đề h2 thành màu xanh
- Thay đổi nội dung của tất cả các đoạn văn bản
- Thêm class "highlight" cho các phần tử có class "important"
<!-- HTML -->
<div class="container">
<h2>Tiêu đề 1</h2>
<p class="important">Đoạn văn bản quan trọng 1</p>
<p>Đoạn văn bản thông thường 1</p>
<h2>Tiêu đề 2</h2>
<p class="important">Đoạn văn bản quan trọng 2</p>
<p>Đoạn văn bản thông thường 2</p>
</div>
// JavaScript - Hãy viết code để thực hiện các yêu cầu trên
// Gợi ý: Sử dụng querySelectorAll và forEach
Bài tập 2: Tạo danh sách động
Yêu cầu
- Tạo một danh sách các mục từ mảng dữ liệu
- Thêm sự kiện click cho mỗi mục
- Thay đổi style khi hover
<!-- HTML -->
<div class="container">
<ul id="list"></ul>
</div>
// JavaScript
const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
// Hãy viết code để:
// 1. Tạo các phần tử li và thêm vào ul
// 2. Thêm sự kiện click cho mỗi li
// 3. Thêm style hover
Bài tập 3: Form Validation
Yêu cầu
- Kiểm tra các trường input khi submit form
- Hiển thị thông báo lỗi bên dưới mỗi trường
- Thêm class "error" cho các trường không hợp lệ
<!-- HTML -->
<form id="myForm">
<div class="form-group">
<input type="text" name="username" placeholder="Tên đăng nhập">
<span class="error-message"></span>
</div>
<div class="form-group">
<input type="email" name="email" placeholder="Email">
<span class="error-message"></span>
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Mật khẩu">
<span class="error-message"></span>
</div>
<button type="submit">Đăng ký</button>
</form>
// JavaScript
// Hãy viết code để:
// 1. Validate form khi submit
// 2. Hiển thị thông báo lỗi
// 3. Thêm class error cho các trường không hợp lệ
Bài tập 4: Todo List
Yêu cầu
- Tạo một Todo List đơn giản
- Thêm task mới
- Đánh dấu task đã hoàn thành
- Xóa task
<!-- HTML -->
<div class="container">
<h2>Todo List</h2>
<div class="add-task">
<input type="text" id="taskInput" placeholder="Thêm task mới">
<button id="addButton">Thêm</button>
</div>
<ul id="taskList"></ul>
</div>
// JavaScript
// Hãy viết code để:
// 1. Thêm task mới
// 2. Đánh dấu task đã hoàn thành
// 3. Xóa task
Bài tập 5: Tabs
Yêu cầu
- Tạo một component Tabs
- Chuyển đổi giữa các tab
- Hiển thị nội dung tương ứng
<!-- HTML -->
<div class="tabs">
<div class="tab-buttons">
<button class="tab-btn active" data-tab="tab1">Tab 1</button>
<button class="tab-btn" data-tab="tab2">Tab 2</button>
<button class="tab-btn" data-tab="tab3">Tab 3</button>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<h3>Nội dung Tab 1</h3>
<p>Đây là nội dung của tab 1</p>
</div>
<div class="tab-pane" id="tab2">
<h3>Nội dung Tab 2</h3>
<p>Đây là nội dung của tab 2</p>
</div>
<div class="tab-pane" id="tab3">
<h3>Nội dung Tab 3</h3>
<p>Đây là nội dung của tab 3</p>
</div>
</div>
</div>
// JavaScript
// Hãy viết code để:
// 1. Chuyển đổi giữa các tab
// 2. Hiển thị nội dung tương ứng
// 3. Thêm hiệu ứng chuyển đổi
Bài tập 6: Infinite Scroll
Yêu cầu
- Tạo danh sách với khả năng tải thêm khi cuộn
- Thêm loading indicator
- Tối ưu hiệu suất
<!-- HTML -->
<div class="container">
<div id="content"></div>
<div id="loading" style="display: none;">Đang tải...</div>
</div>
// JavaScript
// Hãy viết code để:
// 1. Tải thêm nội dung khi cuộn
// 2. Hiển thị loading indicator
// 3. Tối ưu hiệu suất
Kết luận
Các bài tập trên đã bao gồm nhiều tình huống thực tế khi làm việc với DOM Selector. Hãy thực hành từng bài tập và thử nghiệm các giải pháp khác nhau. Điều này sẽ giúp bạn:
- Nắm vững cách sử dụng các phương thức DOM Selector
- Hiểu rõ cách xử lý sự kiện
- Tối ưu hiệu suất khi thao tác với DOM
- Áp dụng các best practices trong thực tế
Hãy thử thách bản thân bằng cách:
- Tự viết code trước khi xem giải pháp
- Thêm các tính năng mới cho mỗi bài tập
- Tối ưu code để có hiệu suất tốt nhất
- Thử nghiệm các giải pháp khác nhau