Phương thức querySelectorAll()
Định nghĩa và sử dụng
Phương thức querySelectorAll() trả về các phần tử trong tài liệu cái phù hợp với selector CSS được chỉ ra, như
là Object node list tĩnh.
Object node list trình bày một tập hợp các nodes. Các nodes có thể được truy cập bởi số chỉ mục (index). Chỉ mục
bắt đầu tại 0.
Tip: Bạn có thể sử dụng đặc tính length của object node list để quyết định số lượng các phần tử cái phù hợp với
selector được chỉ ra, sau đó bạn có thể lặp qua tất cả các phần tử và lấy thông tin bạn muốn.
Cú pháp
document.querySelectorAll(CSS selector)
Các giá trị tham số
Tham số Dạng Mô tả
CSS selectors Chuỗi kí tự Được yêu cầu. Chỉ ra một hay nhiều hơn một selectors CSS để phù hợp phần tử. Những cái này được sử dụng để chọn các phần tử HTML dựa trên id, classes, dạng, thuộc tính, giá trị thuộc tính của chúng. Cho nhiều selectors, chia tách mỗi selector với một dấu phẩy.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h1>The Document Object</h1>
<h2>The querySelectorAll() Method</h2><p>Add a background color all elements with class=”example”:</p>
<h2 class=”example”>A heading</h2>
<p class=”example”>A paragraph.</p><script>
const nodeList = document.querySelectorAll(“.example”);
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = “red”;
}
</script></body>
</html>
Xem kết quả:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_queryselectorall_class