💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 31 tháng 5 năm 2026

Lấy phần tử DOM | Hướng dẫn và bài tập

📌

Kết luận

Dùng document.getElementById() để lấy phần tử HTML qua ID

📝 Mã thực tế tại đây

const el = document.getElementById('title');
el.textContent = 'Xin chào';

Phân biệt textContent và innerHTML

Thuộc tính	Nội dung
`textContent`	Chỉ lấy/gán văn bản (An toàn)
`innerHTML`	Cho phép gán cả thẻ HTML (Nguy hiểm XSS)

Luôn ưu tiên dùng textContent khi bạn chỉ muốn hiển thị văn bản thuần túy để đảm bảo an toàn bảo mật.

Tổng kết

- getElementById tìm phần tử theo ID duy nhất - textContent là cách an toàn nhất để thay đổi chữ trên trang

Hãy thử trong phần bài tập

Hãy lấy phần tử và đổi chữ của nó thành "Xin chào" nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

Thử ngay

■ Bài tập thực hành

Lấy phần tử có id='msg' và đổi nội dung văn bản của nó thành 'Xin chào'.

Gợi ý khi gặp khó khăn

document.getElementById('msg').textContent = 'Xin chào';

15pt

Lấy phần tử DOM

Lấy phần tử có id='msg' và đổi nội dung văn bản của nó thành 'Xin chào'.

Mã nguồn

Xem trước

Lỗi & Console

Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.

Lộ trình học · Toàn bộ bài giảng

Đi sâu bài tập này

"Lấy phần tử DOM" là bài JavaScript (DOM) mức 初級. Lấy phần tử có id='msg' và đổi nội dung văn bản của nó thành 'Xin chào'. Chạy ngay trên trình duyệt với kiểm tra tự động.

getElementById là cách phổ biến nhất để tìm một phần tử cụ thể trên trang web. Mẫu tương tự xuất hiện trong review code và UI thực tế.

Kết hợp với lộ trình js-basic. Bài #54 củng cố kỹ năng dom.

Quy trình từng bước

Đọc bài giải thích và nắm mục tiêu "Lấy phần tử DOM"
Kiểm tra cột JavaScript (DOM) và bắt đầu từ mã mẫu
Mở gợi ý nếu bí, so sánh với lời giải
Bấm Chạy để xem preview/console
Hệ thống kiểm tra có chứa: Hello.
Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải

JavaScript dùng: document.getElementById. Kiểm tra typo và await. Giải thích: getElementById là cách phổ biến nhất để tìm một phần tử cụ thể trên trang web. Gợi ý: document.getElementById('msg').textContent = 'Xin chào';

Ứng dụng thực tế & nghề nghiệp

DOM API cho click, form, modal—từ jQuery đến SPA hiện đại.

Lỗi thường gặp

Bỏ qua gợi ý: document.getElementById('msg').textContent = 'Xin chào';
ID trong getElementById phải khớp từng ký tự với thuộc tính id
Sai ID trong getElementById
Dùng onClick thay addEventListener
Gán textContent khi phần tử null

Xử lý sự cố

Preview không đổi sau khi chạy: Kiểm tra bạn sửa đúng cột JavaScript (DOM) và đã bấm Chạy.
Đúng nhưng không pass: Hệ thống kiểm tra có chứa: Hello. Kiểm tra typo và thẻ đóng.
Lỗi trên console: Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại: Dùng màn ngang hoặc mở cùng URL trên PC.

Mẹo phỏng vấn & portfolio

Giải thích kỹ thuật trong "Lấy phần tử DOM" bằng lời của bạn trong 30 giây
Luyện mô tả từng dòng mã giải trên bảng trắng
Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Thuật ngữ

DOM: Mô hình cây API cho HTML.
getElementById: Lấy phần tử theo id.
addEventListener: Đăng ký sự kiện click…

Từ khóa trên trang này

Trang này là bài tập miễn phí về Lấy phần tử DOM cho từ khóa: Lấy phần tử DOM, dom, 初級, document.getElementById, dom get element.

Công cụ liên quan

Lộ trình học

Lộ trình học →

Bài tập liên quan

Câu hỏi thường gặp (FAQ)

Lấy phần tử DOM có miễn phí không?

Bài tập này hoàn toàn miễn phí và chạy ngay trên trình duyệt. Không cần đăng ký hay thẻ tín dụng.

Độ khó và thời gian?

"Lấy phần tử DOM" ở mức "初級". Đọc hướng dẫn trước; người mới thường hoàn thành trong 30 phút. Mỗi bài khoảng 5–15 phút. Dùng gợi ý, sau đó xem lời giải nếu bí.

Sau khi đúng làm gì?

Sau khi đúng, dùng liên kết bài tiếp theo. Hoàn thành danh mục rồi sang lộ trình học.

Làm trên điện thoại được không?

Chạy trên trình duyệt di động, nhưng gõ mã trên máy tính tiện hơn.

Bài tập khác ở đâu?

Danh sách bài tập: /vi/learn/ có bộ lọc danh mục.

Điểm cần nhớ trong "Lấy phần tử DOM"?

getElementById là cách phổ biến nhất để tìm một phần tử cụ thể trên trang web. Gợi ý: document.getElementById('msg').textContent = 'Xin chào';

Vị trí danh mục dom?

DOM API cho click, form, modal—từ jQuery đến SPA hiện đại.

Các bước cụ thể cho "Lấy phần tử DOM"?

1. Đọc bài giải thích và nắm mục tiêu "Lấy phần tử DOM"
2. Kiểm tra cột JavaScript (DOM) và bắt đầu từ mã mẫu
3. Mở gợi ý nếu bí, so sánh với lời giải
4. Bấm Chạy để xem preview/console
5. Hệ thống kiểm tra có chứa: Hello.
6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải?

JavaScript dùng: document.getElementById. Kiểm tra typo và await.

Giải thích: getElementById là cách phổ biến nhất để tìm một phần tử cụ thể trên trang web.

Gợi ý: document.getElementById('msg').textContent = 'Xin chào';

Khi gặp sự cố?

Preview không đổi sau khi chạy → Kiểm tra bạn sửa đúng cột JavaScript (DOM) và đã bấm Chạy.
Đúng nhưng không pass → Hệ thống kiểm tra có chứa: Hello. Kiểm tra typo và thẻ đóng.
Lỗi trên console → Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại → Dùng màn ngang hoặc mở cùng URL trên PC.

Liên quan nghề nghiệp?

Giải thích kỹ thuật trong "Lấy phần tử DOM" bằng lời của bạn trong 30 giây Luyện mô tả từng dòng mã giải trên bảng trắng Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Công cụ liên quan?

JSON Formatter, Đếm ký tự

Kiến thức nền?

Đọc Lộ trình học trước.

ツール一覧