Truy vấn HTML DOM Phương thứcSelectorAll ()

Thí dụ

Đặt màu nền của phần tử đầu tiên với class = "example" bên trong phần tử <div>:

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Thêm các ví dụ "Hãy tự mình thử" bên dưới.

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

Phương thức querySelectorAll () trả về một tập hợp các phần tử con của một phần tử khớp với (các) bộ chọn CSS được chỉ định, dưới dạng một đối tượng NodeList tĩnh.

Đối tượng NodeList đại diện cho một tập hợp các nút. Các nút có thể được truy cập bằng số chỉ mục. Chỉ số bắt đầu từ 0.

Mẹo: Bạn có thể sử dụng thuộc tính độ dài của đối tượng NodeList để xác định số lượng nút con phù hợp với bộ chọn được chỉ định, sau đó bạn có thể lặp qua tất cả các nút và trích xuất thông tin bạn muốn.

Để biết thêm thông tin về Bộ chọn CSS, hãy truy cập Hướng dẫn Bộ chọn CSS và Tham khảo Bộ chọn CSS của chúng tôi .

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Lưu ý: Internet Explorer 8 có hỗ trợ bộ chọn CSS2. IE9 và các phiên bản mới hơn cũng hỗ trợ CSS3.

Cú pháp

element.querySelectorAll(CSS selectors)

Giá trị tham số

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Chi tiết kỹ thuật

Phiên bản DOM:	Bộ chọn Đối tượng tài liệu cấp 1
Giá trị trả lại:	Một đối tượng NodeList, đại diện cho tất cả các phần tử con của phần tử hiện tại khớp với (các) bộ chọn CSS được chỉ định. NodeList là một tập hợp tĩnh, có nghĩa là những thay đổi trong DOM KHÔNG có tác dụng trong tập hợp. Lưu ý: Ném một ngoại lệ SYNTAX_ERR nếu (các) bộ chọn được chỉ định không hợp lệ

Phiên bản DOM:

Bộ chọn Đối tượng tài liệu cấp 1

Giá trị trả lại:

Một đối tượng NodeList, đại diện cho tất cả các phần tử con của phần tử hiện tại khớp với (các) bộ chọn CSS được chỉ định. NodeList là một tập hợp tĩnh, có nghĩa là những thay đổi trong DOM KHÔNG có tác dụng trong tập hợp.

Lưu ý: Ném một ngoại lệ SYNTAX_ERR nếu (các) bộ chọn được chỉ định không hợp lệ

Các ví dụ khác

Thí dụ

Nhận tất cả các phần tử <p> bên trong phần tử <div> và đặt màu nền của phần tử <p> đầu tiên (chỉ mục 0):

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";

Thí dụ

Lấy tất cả các phần tử <p> trong một <div> với class = "example" và đặt nền của phần tử <p> đầu tiên:

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Thí dụ

Tìm hiểu xem có bao nhiêu phần tử với class = "example" trong một phần tử <div> (sử dụng thuộc tính length của đối tượng NodeList):

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Thí dụ

Đặt màu nền của tất cả các phần tử với class = "example" trong phần tử <div>:

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Thí dụ

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

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Thí dụ

Đặt kiểu đường viền của tất cả <a> phần tử trong phần tử <div> có thuộc tính "target":

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}

Thí dụ

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

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}