Phương thức truy vấn HTML DOMSelectorAll()
Ví dụ
Đặt màu nền của phần tử đầu tiên (trong "myDiv") bằng class="example":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
list[0].style.backgroundColor = "red";
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Sự miêu tả
Phương thức querySelectorAll()
trả về tất cả các phần tử con 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
element .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ả |
Danh sách nút | Tập hợp các phần tử con phù hợp với (các) bộ chọn CSS. NodeList là tĩnh (các thay đổi trong DOM KHÔNG có tác dụng trong bộ sưu tập). Ném ra một ngoại lệ SYNTAX_ERR nếu (các) bộ chọn được chỉ định không hợp lệ. |
Thêm ví dụ
Ví dụ
Đặt màu nền của phần tử <p> đầu tiên trong "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
list[0].style.backgroundColor = "red";
Hãy tự mình thử »Ví dụ
Đặt nền của phần tử <p> đầu tiên trong "myDIV" với class="example":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p.example");
list[0].style.backgroundColor = "red"
Hãy tự mình thử »Ví dụ
Có bao nhiêu phần tử có class="example" trong "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example")
let len = list.length;
Hãy tự mình thử »Ví dụ
Đặt nền của tất cả các thành phần có class="example" trong "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
Hãy tự mình thử »Ví dụ
Đặt màu nền của tất cả phần tử <p> trong "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
Hãy tự mình thử »Ví dụ
Đặt kiểu đường viền của tất cả các phần tử <a> trong "myDIV" có thuộc tính "target":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("a[target]");
for (let i = 0; i < list.length; i++) {
list[i].style.border = "10px solid red";
}
Hãy tự mình thử »Ví dụ
Đặt màu nền của tất cả các phần tử <h3> và <span> trong tài liệu:
const list = document.querySelectorAll("h3, span");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
Hãy tự mình thử »Hỗ trợ trình duyệt
element.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 |