Phương thức truy vấn HTML DOM querySelector ()

Thí dụ

Thay đổi văn bản của phần tử con đầu tiên bằng class = "example" trong phần tử <div>:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

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 querySelector () trả về phần tử con đầu tiên khớp với (các) bộ chọn CSS được chỉ định của một phần tử.

Lưu ý: Phương thức querySelector () chỉ trả về phần tử đầu tiên phù hợp với các bộ chọn được chỉ định. Để trả về tất cả các kết quả phù hợp, hãy sử dụng phương thức querySelectorAll () để thay thế.

Để 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
querySelector()	4.0	8.0	3.5	3.2	10.0

Cú pháp

element.querySelector(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. The returned element depends on which element that is first found in the document (See "More Examples"). 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 phần tử cấp 1
Giá trị trả lại:	Phần tử đầu tiên phù hợp với (các) bộ chọn CSS được chỉ định. Nếu không có kết quả phù hợp nào được tìm thấy, giá trị null được trả về. 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ụ

Thay đổi văn bản của phần tử <p> đầu tiên trong phần tử <div>:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Thí dụ

Thay đổi văn bản của phần tử <p> đầu tiên bằng class = "example" trong phần tử <div>:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Thí dụ

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

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Thí dụ

Thêm đường viền màu đỏ vào phần tử <a> đầu tiên có thuộc tính đích bên trong phần tử <div>:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

Thí dụ

Ví dụ này minh họa cách hoạt động của nhiều bộ chọn.

Giả sử rằng bạn có hai phần tử: một phần tử <h2> và một phần tử <h3>.

Đoạn mã sau sẽ thêm màu nền vào phần tử <h2> đầu tiên trong <div>:

<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Tuy nhiên, nếu phần tử <h3> được đặt trước phần tử <h2> trong <div>. Phần tử <h3> là phần tử sẽ có màu nền đỏ.

<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";