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

Definition and usage

querySelector() The method returns the first child element that matches the specified CSS selector of the element.

Note:

querySelector() The method returns only the first element that matches the specified selector. To return all matches, use querySelectorAll() method.

See also:

Reference manual:

classList property

className property

querySelectorAll() method

getElementsByTagName() method

getElementsByClassName() method

Đối tượng Style HTML DOM

Tutorial:

Ngữ pháp CSS

Chọn器 CSS

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

Example

Ví dụ 1

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

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

Thử trực tiếp

More examples are provided below the page.

Syntax

element.querySelector(CSSselectors)

Parameters

Parameters Description
CSSselectors

Required. String. Specifies one or more CSS selectors to match elements.

CSS selectors are used to select HTML elements based on id, class, type, attributes, attribute values, etc.

For multiple selectors, separate each selector with a comma.

The returned element depends on the first element found in the document (see the "More examples" below).

Tip:For a complete list of CSS selectors, please see our Tài liệu tham khảo chọn器 CSS.

Technical details

Return value:

Matches the first element that matches the specified CSS selector.

If no matches are found, null is returned.

If the specified selector is invalid, a SYNTAX_ERR exception is thrown.
DOM version: Selectors Level 1 Element Object

More examples

Ví dụ 2

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

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

Thử trực tiếp

Ví dụ 3

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

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

Thử trực tiếp

Ví dụ 4

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

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

Thử trực tiếp

Ví dụ 5

Thêm viền đỏ cho phần tử <a> đầu tiên trong <div> có thuộc tính target:

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

Thử trực tiếp

Ví dụ 6

Ví dụ này minh họa cách làm việc của các bộ lọc chọn nhiều.

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

Mã sau đây sẽ thêm màu nền cho phần tử <h2> đầu tiên trong <div>:

<div id="myDIV">
  <h2>Một phần tử h2</h2>
  <h3>Một phần tử h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Thử trực tiếp

Ví dụ 7

Nhưng, nếu phần tử <h3> trong <div> được đặt trước phần tử <h2> thì phần tử <h3> sẽ có màu nền đỏ.

<div id="myDIV">
  <h3>Một phần tử h3</h3>
  <h2>Một phần tử h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Thử trực tiếp

Hỗ trợ trình duyệt

Số trong bảng chỉ ra 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 8.0 3.5 3.2 10.0

Trang liên quan

Giáo trình CSS:Chọn器 CSS

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

Giáo trình JavaScript:JavaScript HTML DOM Node List

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

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

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