Phương thức
const matches = document.querySelectorAll["p"];
0 const matches = document.querySelectorAll["p"];
1 trả về một const matches = document.querySelectorAll["p"];
2 tĩnh [không hoạt động] đại diện cho danh sách các thành phần của tài liệu khớp với nhóm bộ chọn đã chỉ địnhcú pháp
querySelectorAll[selectors]
Thông số
const matches = document.querySelectorAll["p"];
3Một chuỗi chứa một hoặc nhiều bộ chọn để khớp với. Chuỗi này phải là chuỗi bộ chọn CSS hợp lệ; . Xem Định vị các phần tử DOM bằng bộ chọn để biết thêm thông tin về cách sử dụng bộ chọn để xác định các phần tử. Nhiều bộ chọn có thể được chỉ định bằng cách tách chúng bằng dấu phẩy
Ghi chú. Các ký tự không phải là một phần của cú pháp CSS tiêu chuẩn phải được thoát bằng ký tự dấu gạch chéo ngược. Vì JavaScript cũng sử dụng thoát dấu gạch chéo ngược, nên phải đặc biệt cẩn thận khi viết các chuỗi ký tự bằng cách sử dụng các ký tự này. Xem Thoát các ký tự đặc biệt để biết thêm thông tin
Giá trị trả về
Một
const matches = document.querySelectorAll["p"];
2 không tồn tại chứa một đối tượng const matches = document.querySelectorAll["p"];
6 cho mỗi phần tử khớp với ít nhất một trong các bộ chọn được chỉ định hoặc một const matches = document.querySelectorAll["p"];
2 trống trong trường hợp không khớpGhi chú. Nếu
const matches = document.querySelectorAll["p"];
3 được chỉ định bao gồm phần tử giả CSS, thì danh sách được trả về luôn trốngngoại lệ
const matches = document.querySelectorAll["p"];
4 const matches = document.querySelectorAll["p"];
10Bị ném nếu cú pháp của chuỗi
const matches = document.querySelectorAll["p"];
3 được chỉ định không hợp lệví dụ
Lấy danh sách các trận đấu
Để có được một
const matches = document.querySelectorAll["p"];
2 của tất cả các yếu tố const matches = document.querySelectorAll["p"];
13 trong tài liệuconst matches = document.querySelectorAll["p"];
Ví dụ này trả về một danh sách tất cả các phần tử
const matches = document.querySelectorAll["p"];
14 trong tài liệu với một lớp là const matches = document.querySelectorAll["p"];
15 hoặc const matches = document.querySelectorAll["p"];
16const matches = document.querySelectorAll["p"];
1Ở đây, chúng tôi nhận được một danh sách các phần tử
const matches = document.querySelectorAll["p"];
13 có phần tử cha trực tiếp là một const matches = document.querySelectorAll["p"];
14 với lớp const matches = document.querySelectorAll["p"];
19 và được đặt bên trong một thùng chứa có ID là const matches = document.querySelectorAll["p"];
30const matches = document.querySelectorAll["p"];
3Ví dụ này sử dụng bộ chọn thuộc tính để trả về danh sách các phần tử
const matches = document.querySelectorAll["p"];
31 trong tài liệu có chứa thuộc tính có tên là const matches = document.querySelectorAll["p"];
32const matches = document.querySelectorAll["p"];
7Ở đây, một bộ chọn thuộc tính được sử dụng để trả về danh sách các mục danh sách có trong danh sách có ID là
const matches = document.querySelectorAll["p"];
33 có thuộc tính const matches = document.querySelectorAll["p"];
34 có giá trị là const matches = document.querySelectorAll["p"];
35querySelectorAll[selectors]
1Truy cập các trận đấu
Sau khi trả về
const matches = document.querySelectorAll["p"];
2 phần tử phù hợp, bạn có thể kiểm tra nó giống như bất kỳ mảng nào. Nếu mảng trống [nghĩa là thuộc tính const matches = document.querySelectorAll["p"];
37 của nó bằng 0], thì không tìm thấy kết quả khớp nàoMặt khác, bạn có thể sử dụng ký hiệu mảng tiêu chuẩn để truy cập nội dung của danh sách. Bạn có thể sử dụng bất kỳ câu lệnh lặp phổ biến nào, chẳng hạn như
querySelectorAll[selectors]
4Ghi chú người dùng
const matches = document.querySelectorAll["p"];
1 hoạt động khác với hầu hết các thư viện JavaScript DOM phổ biến, điều này có thể dẫn đến kết quả không mong muốnHTML
Hãy xem xét HTML này, với ba khối
const matches = document.querySelectorAll["p"];
14 lồng nhau của nóquerySelectorAll[selectors]
7JavaScript
querySelectorAll[selectors]
8Trong ví dụ này, khi chọn
const matches = document.querySelectorAll["p"];
70 trong ngữ cảnh của const matches = document.querySelectorAll["p"];
14 với lớp const matches = document.querySelectorAll["p"];
72, phần tử với lớp const matches = document.querySelectorAll["p"];
73 vẫn được tìm thấy, mặc dù const matches = document.querySelectorAll["p"];
74 không phải là phần tử con của phần tử cơ sở mà tìm kiếm được thực hiện [const matches = document.querySelectorAll["p"];
75]. Theo mặc định, const matches = document.querySelectorAll["p"];
1 chỉ xác minh rằng phần tử cuối cùng trong bộ chọn có nằm trong phạm vi tìm kiếm khôngLớp giả
const matches = document.querySelectorAll["p"];
77 khôi phục hành vi dự kiến, chỉ các bộ chọn phù hợp trên con cháu của phần tử cơ sở