Phương pháp querySelectorAll() của HTML DOM Element

Định nghĩa và cách sử dụng

querySelectorAll() Phương thức trả về bộ sưu tập các phần tử con phù hợp với bộ lọc CSS, dưới dạng đối tượng NodeList tĩnh.

NodeList

NodeList là bộ sưu tập các nút tương tự mảng (danh sách).

Các nút trong danh sách có thể được truy cập qua chỉ số (biểu thức). Chỉ số bắt đầu từ 0.

Thuộc tính length có thể trả về số lượng nút trong danh sách.

Xin xem thêm:

Tài liệu tham khảo:

Thuộc tính classList

Thuộc tính className

Phương thức querySelector()

Phương thức getElementsByTagName()

Phương thức getElementsByClassName()

Đối tượng Style HTML DOM

Hướng dẫn:

Ngữ pháp CSS

Chọn器 CSS

Tài liệu tham khảo Chọn器 CSS

Thực hành

Ví dụ 1

Đặt màu nền cho phần tử đầu tiên có class="example" trong phần tử <div>:

// Lấy phần tử có id="myDIV" (div), sau đó lấy tất cả các phần tử có class="example" trong div
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Đặt màu nền cho phần tử đầu tiên có class="example" trong div (tên mục 0)
x[0].style.backgroundColor = "red";

Thử ngay

Lưu ý:Có thêm ví dụ ở cuối trang.

Cú pháp

element.querySelectorAll(cssSelectors)

参數

参數 Mô tả
cssSelectors

Bắt buộc. Chữỗi. Quy định một hoặc nhiều bộ lọc CSS để phù hợp với phần tử.

Bộ lọc CSS được sử dụng để chọn các phần tử HTML dựa trên id, class, loại, thuộc tính, giá trị thuộc tính, v.v.

Đối với nhiều bộ lọc chọn, phân隔 mỗi bộ lọc bằng dấu phẩy.

Lưu ý:Để xem danh sách tất cả các bộ lọc CSS, xin hãy xem Tài liệu tham khảo Chọn器 CSS.

Chi tiết kỹ thuật

Giá trị trả về:

Đối tượng NodeList biểu thị tất cả các phần tử con phù hợp với bộ lọc CSS hiện tại.

NodeList là bộ sưu tập tĩnh, điều này có nghĩa là thay đổi trong DOM không ảnh hưởng đến bộ sưu tập.

Lưu ý:Nếu bộ lọc chọn được chỉ định không hợp lệ, sẽ ném ngoại lệ SYNTAX_ERR
Phiên bản DOM: Tài liệu cấp độ 1 của Selectors Document Object

Các ví dụ thêm

Ví dụ 2

Lấy tất cả các thẻ <p> trong phần tử <div> và đặt màu nền cho thẻ <p> đầu tiên (tên mục 0):

// Lấy phần tử có id="myDIV" (div), sau đó lấy tất cả các phần tử p trong div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Đặt màu nền cho thẻ <p> đầu tiên trong div (tên mục 0)
x[0].style.backgroundColor = "red";

Thử ngay

Ví dụ 3

Lấy tất cả các thẻ <p> có class="example" trong <div> và đặt nền cho thẻ <p> đầu tiên:

// Lấy phần tử có id="myDIV" (div), sau đó lấy tất cả các phần tử p có class="example" trong div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Đặt màu nền cho phần tử <p> đầu tiên có class="example" trong div (index 0)
x[0].style.backgroundColor = "red";

Thử ngay

Ví dụ 4

Tìm ra số lượng phần tử có class="example" trong phần tử <div> (sử dụng thuộc tính length của NodeList):

/* Lấy phần tử có id="myDIV" (div), sau đó lấy tất cả các phần tử p có class="example" trong div, trả về số lượng phần tử đã tìm thấy */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Thử ngay

Ví dụ 5

Đặt màu nền cho tất cả các phần tử có class="example" trong phần tử <div>:

// Lấy phần tử có id="myDIV" (div), sau đó lấy tất cả các phần tử có class="example" trong div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Tạo vòng lặp for và đặt màu nền cho tất cả các phần tử có class="example" trong div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Thử ngay

Ví dụ 6

Đặt màu nền cho tất cả các phần tử <p> trong phần tử <div>:

// Lấy phần tử có id="myDIV" (div), sau đó lấy tất cả các phần tử p trong div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Tạo vòng lặp for và đặt màu nền cho tất cả các phần tử p trong div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Thử ngay

Ví dụ 7

Đặt樣式 viền cho tất cả các phần tử <a> có thuộc tính target trong phần tử <div>:

// Lấy phần tử có id="myDIV" (div), sau đó lấy tất cả các phần tử <a> có thuộc tính "target" trong div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Tạo vòng lặp for và đặt viền cho tất cả các phần tử <a> có thuộc tính target
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Thử ngay

Ví dụ 8

Đặt màu nền cho tất cả các phần tử <h2>, <div> và <span> trong phần tử <div>:

// Lấy phần tử có id="myDIV" (div), sau đó lấy tất cả các phần tử <h2>, <div> và <span> trong <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Tạo vòng lặp for và đặt màu nền cho tất cả các phần tử <h2>, <div> và <span> trong <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Thử ngay

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ phương pháp này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Lưu ý:Internet Explorer 8 hỗ trợ CSS2 selector. IE9 và các phiên bản cao hơn hỗ trợ CSS3.

Trang liên quan

Hướng dẫn CSS:Chọn器 CSS

Tài liệu tham khảo CSS:Tài liệu tham khảo Chọn器 CSS

Hướng dẫn JavaScript:JavaScript HTML DOM Node List

Tài liệu tham khảo JavaScript:element.querySelector()

Tài liệu tham khảo HTML DOM:document.querySelectorAll()