HTML DOM Document querySelectorAll ()
Thí dụ
Chọn tất cả các phần tử có class = "example":
document.querySelectorAll(".example");
Thêm ví dụ bên dưới.
Định nghĩa và Cách sử dụng
Phương querySelectorAll()thức này trả về tất cả các phần tử phù hợp với (các) bộ chọn CSS.
Phương querySelectorAll()thức trả về một NodeList .
Phương querySelectorAll()thức ném một 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 Danh sách Nút JavaScript
Phương thức QuerySelector:
Phương thức Element querySelector ()
Phương thức Element querySelectorAll ()
Phương thức truy vấn tài liệuSelector ()
Phương thức truy vấn tài liệuSelectorAll ()
Phương thức GetElement:
Phương thức Tài liệu getElementById ()
HTML DOM NodeList / HTMLCollection
Sự khác biệt giữa HTMLCollection và NodeList
NodeList và HTMLCollection đều là bộ sưu tập giống mảng (danh sách) các nút (phần tử) được trích xuất từ một tài liệu. Các nút có thể được truy cập bằng số chỉ mục. Chỉ số bắt đầu từ 0.
Cả hai đối tượng đều có thuộc tính length trả về số phần tử trong danh sách.
Bộ sưu tập HTMLC là một tập hợp trực tiếp : Nếu bạn thêm phần tử <li> vào danh sách trong DOM, danh sách trong Bộ sưu tập HTMLC cũng sẽ thay đổi.
NodeList là một tập hợp tĩnh : Nếu bạn thêm phần tử <li> vào danh sách trong DOM, danh sách trong NodeList sẽ không thay đổi.
Các getElementsByClassName()và getElementsByTagName()
phương thức trả về một bộ sưu tập HTMLC.
Các phương thức querySelector()và querySelectorAll()
trả về một NodeList.
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ả lại
| Loại | Sự miêu tả |
| Sự vật | Một NodeList với các phần tử phù hợp với (các) bộ chọn CSS. Nếu không tìm thấy kết quả phù hợp, nullsẽ được trả về. |
Các ví dụ khác
Thêm màu nền vào phần tử <p> đầu tiên:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Thêm màu nền vào phần tử <p> đầu tiên với class = "example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Số phần tử có class = "example":
let numb = document.querySelectorAll(".example").length;
Đặt màu nền của tất cả các phần tử với class = "example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Đặ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";
}
Đặt đường viền của tất cả <a> phần tử 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";
}
Đặt màu nền của mọi phần tử <p> trong đó phần tử chính là phần tử <div>:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Đặt màu nền của tất cả các phần tử <h3>, <div> và <span>:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Hỗ trợ trình duyệt
document.querySelectorAll() là một tính năng DOM Cấp 3 (2004).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |