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

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

querySelector() Phương pháp này trả về phần tử khớp với bộ lọc CSSĐầu tiênphần tử.

Để trả vềTất cảphần tử khớp (không chỉ phần tử khớp đầu tiên), hãy sử dụng querySelectorAll() thay thế.

Nếu bộ lọc không hợp lệ, thì querySelector() và querySelectorAll() sẽ ném ra SYNTAX_ERR Lỗi.

Mô hình

Ví dụ 1

Lấy phần tử <p> đầu tiên:

document.querySelector("p");

Thử ngay

Ví dụ 2

Lấy phần tử đầu tiên có lớp "example":

document.querySelector(".example");

Thử ngay

Ví dụ 3

Lấy phần tử <p> đầu tiên có lớp "example":

document.querySelector("p.example");

Thử ngay

Ví dụ 4

Thay đổi văn bản của phần tử có id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Thử ngay

Ví dụ 5

Chọn phần tử <p> đầu tiên có cha là phần tử <div>:

document.querySelector("div > p");

Thử ngay

Ví dụ 6

Chọn phần tử <a> đầu tiên có thuộc tính "target":

document.querySelector("a[target]");

Thử ngay

Ví dụ 7

Chọn phần tử đầu tiên <h3> hoặc đầu tiên <h4>:

<h3>Một phần tử h3</h3>
<h4>Một phần tử h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Thử ngay

Ví dụ 8

Chọn phần tử đầu tiên <h3> hoặc đầu tiên <h4>:

<h4>Một phần tử h4</h4>
<h3>Một phần tử h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Thử ngay

Cú pháp

document.querySelector(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.

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

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

Giá trị trả về

Loại Mô tả
Đối tượng

NodeList chứa phần tử đầu tiên khớp với bộ lọc CSS.

Nếu không tìm thấy phần tử phù hợp, sẽ trả về null.

Sự khác biệt giữa HTMLCollection và NodeList

NodeList và HTMLcollection Rất相似.

Cả hai đều là bộ sưu tập các nút (yếu tố) tương tự mảng được lấy từ tài liệu. Các nút có thể được truy cập qua số thứ tự (biểu thức). Số thứ tự bắt đầu từ 0.

Cả hai đều có length Thuộc tính, nó trả về số lượng yếu tố trong danh sách (bộ sưu tập).

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

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

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

Các phần tử 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() Tất cả các 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.querySelector() Là tính năng DOM Level 1 (1998).

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:

Bộ chọn CSS

Tài liệu tham khảo về bộ chọn CSS

Tài liệu tham khảo về NodeList HTML DOM

Phương thức QuerySelector:

Phương thức querySelector():

Phương thức querySelectorAll():

Phương thức GetElement:

Phương thức getElementById()

Phương thức getElementsByTagName()

Phương thức getElementsByClassName()