JavaScript DOM Selector là gì? Tìm hiểu các phương thức chọn phần tử DOM phổ biến
5:00 read
JavaScript DOM Selector là gì? Tìm hiểu các phương thức chọn phần tử DOM phổ biến
JavaScript DOM Selector là một trong những khái niệm cơ bản và quan trọng nhất khi làm việc với JavaScript trong web development. Trong bài viết này, chúng ta sẽ tìm hiểu về các phương thức chọn phần tử DOM, cách sử dụng chúng hiệu quả và các best practices.
DOM Selector là gì?
DOM (Document Object Model) Selector là cách để chọn và thao tác với các phần tử HTML trên trang web của bạn thông qua JavaScript. Nó cho phép bạn truy cập, thay đổi, thêm hoặc xóa các phần tử HTML một cách động.
Bảng tổng hợp các phương thức DOM Selector
| Phương thức | Cú pháp | Ví dụ | Mô tả |
|---|---|---|---|
| getElementById | document.getElementById() |
document.getElementById('header') |
Chọn phần tử theo ID |
| getElementsByClassName | document.getElementsByClassName() |
document.getElementsByClassName('item') |
Chọn các phần tử theo class |
| getElementsByTagName | document.getElementsByTagName() |
document.getElementsByTagName('p') |
Chọn các phần tử theo tên thẻ |
| querySelector | document.querySelector() |
document.querySelector('.item') |
Chọn phần tử đầu tiên khớp với selector |
| querySelectorAll | document.querySelectorAll() |
document.querySelectorAll('.item') |
Chọn tất cả phần tử khớp với selector |
| getElementsByName | document.getElementsByName() |
document.getElementsByName('username') |
Chọn các phần tử theo thuộc tính name |
| closest | element.closest() |
element.closest('.parent') |
Tìm phần tử cha gần nhất khớp với selector |
| matches | element.matches() |
element.matches('.active') |
Kiểm tra phần tử có khớp với selector |
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.