Truy vấn tài liệu DOM HTMLSelectorAll()
Ví dụ
Chọn tất cả các phần tử có class="example":
document.querySelectorAll(".example");
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Phương thức querySelectorAll()
trả về tất cả các phần tử khớp với (các) bộ chọn CSS.
Phương thức querySelectorAll()
trả về NodeList .
Phương thức querySelectorAll()
ném ra ngoại lệ SYNTAX_ERR nếu (các) bộ chọn không hợp lệ
Hướng dẫn:
Hướng dẫn về danh sách nút JavaScript
Phương thức QuerySelector:
Phương thức phần tử querySelector()
Phương thức phần tử querySelectorAll()
Phương thức Document querySelector()
Phương thức Document querySelectorAll()
Phương thức GetElement:
Phương thức getElementById() của Document
Danh sách nút
NodeList là một tập hợp (danh sách) các nút giống như mảng.
Các nút trong danh sách có thể được truy cập theo chỉ mục. Chỉ số bắt đầu từ 0.
Độ dài Poperty trả về số nút trong danh sách.
Cú pháp
document.querySelectorAll( CSS selectors )
Thông số
Parameter | Description |
CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference . For multiple selectors, separate each selector with a comma (See "More Examples"). |
Giá trị trả về
Kiểu | Sự miêu tả |
Sự vật | Đối tượng NodeList có các phần tử khớp với (các) bộ chọn CSS. Nếu không tìm thấy kết quả khớp nào, một đối tượng NodeList trống sẽ được trả về. |
Thêm ví dụ
Thêm màu nền cho phần tử <p> đầu tiên:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Hãy tự mình thử »Thêm màu nền cho phần tử <p> đầu tiên bằng class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Hãy tự mình thử »Số phần tử có class="example":
let numb = document.querySelectorAll(".example").length;
Hãy tự mình thử »Đặt màu nền của tất cả các thành phần bằng class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Hãy tự mình thử »Đặt màu nền của tất cả các phần tử <p>:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Hãy tự mình thử »Đặt đường viền của tất cả các phần tử <a> bằng thuộc tính "target":
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Hãy tự mình thử »Đặt màu nền của mọi phần tử <p> trong đó phần tử gốc là phần tử <div>:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Hãy tự mình thử »Đặt màu nền của tất cả các phần tử <h3> và <span>:
const nodeList = document.querySelectorAll("h3, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Hãy tự mình thử »Hỗ trợ trình duyệt
document.querySelectorAll()
là tính năng DOM Cấp 3 (2004).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 11 |