Trong JavaScript, “ truy vấnSelectorAll() ” lấy phần tử đầu tiên khớp chính xác với bộ chọn CSS đã chỉ định. Phương thức này bắt đầu duyệt qua cây DOM để thực hiện nhiệm vụ này. Khi phần tử được tìm thấy, nó sẽ áp dụng các thuộc tính hoặc phương thức tích hợp sẵn của JavaScript được xác định trong phần tập lệnh để thực hiện các tác vụ đặc biệt. Phương pháp này thường được sử dụng để chọn các phần tử được nhắm mục tiêu theo yêu cầu. Nó cho phép người dùng chọn tất cả các phần tử khớp với bộ chọn đã chỉ định hoặc phần tử cụ thể được đặt tại chỉ mục đã cho.
Hướng dẫn này minh họa việc sử dụng phương thức “querySelectorAll()” trong JavaScript.
Làm cách nào để sử dụng Phương thức “querySelectorAll()” trong JavaScript?
Để sử dụng “ truy vấnSelectorAll() ”, hãy chỉ định bộ chọn CSS làm đối số của nó. Bộ chọn CSS bao gồm “Loại, Lớp và id”. Nếu bộ chọn CSS không hợp lệ, nó sẽ trả về một lỗi cú pháp, nếu không, nó sẽ trả về một đối tượng NodeList tĩnh làm đầu ra tiêu chuẩn.
cú pháp
document.querySelectorAll ( bộ chọn CSS )
Trong cú pháp trên, “ bộ chọn CSS ” tham khảo tất cả các bộ chọn CSS hợp lệ.
Hãy sử dụng cú pháp được xác định ở trên một cách thực tế.
Mã HTML
Tổng quan về mã HTML đã cho:
< h2 lớp học = 'thử nghiệm' > tiêu đề đầu tiên h2 >< h3 lớp học = 'thử nghiệm' > tiêu đề thứ hai h3 >
< P lớp học = 'thử nghiệm' > Đoạn đầu tiên P >
< P lớp học = 'thử nghiệm' > Đoạn thứ hai P >
< cái nút trong một cái nhấp chuột = 'jsFunc()' > Bấm vào đây ! cái nút >
Trong các dòng mã trên:
- Các ' ” thẻ thêm tiêu đề phụ có lớp “demo”.
- Các ' ” thẻ định nghĩa một phân nhóm thứ hai với cùng một lớp có tên là “demo”.
- Các ' ” các thẻ nhúng các câu lệnh đoạn có cùng một lớp, tức là “demo”.
- Các '
” bao gồm một nút mới với sự kiện chuột “onclick” để thực thi chức năng “jsFunc()”.
Ghi chú: Mã HTML cụ thể được theo dõi trong suốt hướng dẫn này.
Ví dụ 1: Áp dụng Phương thức “querySelectorAll()” để chọn các phần tử có cùng lớp và thay đổi màu sắc của chúng
Ví dụ này sử dụng phương thức “querySelectorAll()” để chọn tất cả các phần tử sử dụng lớp “demo”.
Mã JavaScript
Hãy xem tổng quan mã được nêu dưới đây:
< kịch bản >chức năng jsFunc ( ) {
danh sách const = document.querySelectorAll ( '.thử nghiệm' ) ;
vì ( cho phép tôi = 0 ; Tôi < danh sách. chiều dài; tôi ++ ) {
danh sách [ Tôi ] .style.color= 'cam' ;
}
}
kịch bản >
Trong các dòng mã trên:
- Các ' jsFunc() ” chức năng được xác định.
- Theo định nghĩa của nó, biến 'danh sách' sử dụng ' truy vấnSelectorAll() ” để chọn tất cả các phần tử có lớp “demo”.
- Tiếp theo, phần “ vì ” vòng lặp khởi tạo một danh sách nút để lặp lại dọc theo tất cả các phần tử HTML được tìm thấy có lớp “ thử nghiệm ” và thay đổi màu chữ của chúng bằng nút “ style.color ' tài sản.
đầu ra
Trong đầu ra ở trên, có thể thấy rằng màu văn bản của các thành phần có cùng tên lớp, tức là “demo” được thay đổi khi nhấp vào nút.
Ví dụ 2: Áp dụng Phương thức “querySelectorAll()” để chọn các phần tử được lập chỉ mục cụ thể
Ngoài tất cả các phần tử, người dùng cũng có thể chọn phần tử được lập chỉ mục cụ thể có lớp “demo”.
Mã JavaScript
Hãy xem xét mã JavaScript đã cho:
< kịch bản >chức năng jsFunc ( ) {
danh sách const = document.querySelectorAll ( 'h2.demo' ) ;
danh sách [ 0 ] .style.color= 'màu xanh lá' ;
}
kịch bản >
Trong đoạn mã trên:
- Biến “list” chọn phần tử “h2” có lớp là “demo” với sự trợ giúp của “ truy vấnSelectorAll() ' phương pháp.
- Sau đó, biến “list” chỉ định chỉ mục của phần tử “h2” để thay đổi màu văn bản của phần tử “H2” được đặt tại chỉ mục “0”.
đầu ra
Đầu ra cho thấy rằng màu văn bản của phần tử “H2” được đặt ở chỉ số 0 có lớp “demo” thay đổi khi nhấp vào nút.
Ví dụ 3: Áp dụng phương thức “querySelectorAll()” để lấy số phần tử có cùng lớp
Ví dụ này truy xuất số phần tử có cùng một lớp bằng cách sử dụng phương thức “querySelectorAll()”.
Mã HTML
Trước tiên, hãy xem mã HTML đã sửa đổi của “Ví dụ 1”:
< P nhận dạng = 'vì' > P >
Trong mã HTML đã nêu ở trên, hãy thêm một đoạn trống có id “para” vào cuối mã HTML “Ví dụ 1”.
Mã JavaScript
Bây giờ, hãy tiếp tục với mã JavaScript:
< kịch bản >chức năng jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
tài liệu.getElementById ( 'vì' ) .innerHTML = nodelist.length;
}
kịch bản >
Theo đoạn mã trên:
- Đầu tiên, hàm “jsFunc()” chọn tất cả các phần tử “
” bằng cách sử dụng “ truy vấnSelectorAll() ' phương pháp.
- Sau đó, “ getElementById() ” phương thức truy cập vào đoạn văn bản trống đã thêm thông qua id “para” của nó để nối đoạn văn bản đó với giá trị được trả về của thuộc tính “độ dài” được áp dụng.
đầu ra
Như đã thấy, đầu ra ở trên hiển thị tổng cộng “4” phần tử khớp với bộ chọn lớp CSS được chỉ định “bản demo”.
Phần kết luận
Các ' truy vấnSelectorAll() ” có thể được sử dụng dễ dàng bằng cách chỉ định bộ chọn CSS làm giá trị của nó. Phương thức này khớp với từng phần tử HTML và chọn những phần tử khớp với bộ chọn đã chỉ định. Sau khi các phần tử được chọn, nó sẽ thực hiện tác vụ bắt buộc đối với chúng được xác định trong phần tập lệnh. Hướng dẫn này minh họa ngắn gọn việc sử dụng phương thức “querySelectorAll()” trong JavaScript.