Bài tập thực hành JavaScript DOM Selector - Từ cơ bản đến nâng cao
5:00 read
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
Yêu cầu đăng nhập
Vui lòng đăng nhập để truy cập nội dung này
Additional Resources
Course Guide
Comprehensive PDF guide with examples
GitHub Repository
Example code for all lessons
Discussion
Have a question about this lesson? Post it here and get answers from instructors and peers.