QuerySelectorAll trong JavaScript

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ỉ định

cú pháp

querySelectorAll[selectors]

Thông số

const matches = document.querySelectorAll["p"];
3

Mộ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ớp

Ghi 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ống

ngoại lệ

const matches = document.querySelectorAll["p"];
4
const matches = document.querySelectorAll["p"];
10

Bị 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ệu

const 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"];
16

const 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"];
30

const matches = document.querySelectorAll["p"];
3

Ví 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"];
32

const 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"];
35

querySelectorAll[selectors]
1

Truy 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ào

Mặ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]
4

Ghi 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ốn

HTML

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]
7

JavaScript

querySelectorAll[selectors]
8

Trong 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ông

Lớ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ở

Chủ Đề