Phương thức querySelectorAll() của Đối tượng Document HTML DOM

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

querySelectorAll() Phương thức trả về tất cả các phần tử khớp với bộ lọc CSS.

querySelectorAll() Phương thức trả về NodeList.

Nếu bộ lọc không hợp lệ, thì querySelectorAll() Phương thức này sẽ ném SYNTAX_ERR Lỗi.}

Mô hình

Ví dụ 1

Chọn tất cả các phần tử có class="example":

document.querySelectorAll(".example");

Thử ngay.

Ví dụ 2

Thêm màu nền cho phần tử <p> đầu tiên:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Thử ngay.

Ví dụ 3

Thêm màu nền cho phần tử <p> đầu tiên có class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Thử ngay.

Ví dụ 4

Số lượng phần tử có class="example":

let numb = document.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":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Thử ngay.

Ví dụ 6

Đặt màu nền cho 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";
}

Thử ngay.

Ví dụ 7

Đặt viền cho tất cả các phần tử <a> sử dụ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";
}

Thử ngay.

Ví dụ 8

Đặt màu nền cho tất cả các phần tử <p> có phần tử cha là <div>.

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Thử ngay.

Ví dụ 9

Đặt màu nền cho 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";
}

Thử ngay.

Cú pháp

document.querySelectorAll(CSSselectors)

Tham số

Tham số Mô tả
CSSselectors

Bắt buộc. Một hoặc nhiều bộ lọc CSS.

Bộ lọc CSS chọn các phần tử HTML dựa trên id, lớp, loại, thuộc tính, giá trị thuộc tính, v.v.

Để có danh sách đầy đủ, các bạn hãy truy cập vào Tài liệu tham khảo chọn lọc CSS.

Đối với nhiều bộ lọc, các bạn hãy chia cách mỗi bộ lọc bằng dấu phẩy (xem ví dụ trên).

Giá trị trả về

Loại Mô tả
Object

Đối tượng NodeList chứa các phần tử khớp với bộ lọc CSS.

Nếu không tìm thấy mục phù hợp, nó sẽ trả về đối tượng NodeList trống.

Khác biệt giữa HTMLCollection và NodeList

NodeList và HTMLcollection rất相似.

cả hai đều là tập hợp các nút (thành phần) tương tự mảng được lấy từ tài liệu. Các bạn có thể truy cập vào các nút thông qua số thứ tự (địa chỉ). Số thứ tự bắt đầu từ 0.

cả hai đều có length thuộc tính, nó trả về số lượng phần tử (tập hợp) trong danh sách (danh sách).

HTMLCollection làyếu tố tài liệucủa bộ sưu tập.

NodeList làYếu tố tài liệucủa các yếu tố, yếu tố thuộc tính và yếu tố văn bản).

Các phần của HTMLCollection có thể truy cập qua tên, id hoặc số thứ tự của chúng.

Các phần của NodeList chỉ có thể truy cập qua số thứ tự của chúng.

HTMLCollection luôn làThực thờicủa bộ sưu tập.

Ví dụ: Nếu thêm yếu tố <li> vào danh sách trong DOM, danh sách trong HTMLCollection cũng sẽ thay đổi.

NodeList thường làTĩnhcủa bộ sưu tập.

Ví dụ: Nếu thêm yếu tố <li> vào danh sách trong DOM, danh sách trong NodeList sẽ không thay đổi.

getElementsByClassName() và getElementsByTagName() Phương thức đều trả về HTMLCollection thực thời.

querySelectorAll() Phương thức trả về NodeList tĩnh.

childNodes Thuộc tính trả về NodeList thực thời.

Hỗ trợ trình duyệt

document.querySelectorAll() Là tính năng của DOM Level 3 (2004).

Tất cả các trình duyệt đều hỗ trợ nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Trang liên quan

Giáo trình:

Chọn lọc CSS

Tài liệu tham khảo chọn lọc CSS

Giáo trình NodeList JavaScript

Phương thức QuerySelector:

Phương thức querySelector() của Element

Phương thức querySelectorAll() của Element

Phương thức querySelector() của Document

Phương thức querySelectorAll() của Document

Phương thức GetElement:

Phương thức getElementById() của Document

Phương thức getElementsByTagName() của Document

Phương thức getElementsByClassName() của Document