JavaScript: phương thức querySelector

Phương thức querySelector() trả về phần tử đầu tiên là phần tử con của phần tử mà nó được gọi ra khớp với nhóm bộ chọn được chỉ định.

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

Nếu bộ chọn khớp với ID trong tài liệu được sử dụng nhiều lần (Lưu ý rằng “id” phải là duy nhất trong một trang và không nên được sử dụng nhiều lần), nó sẽ trả về phần tử khớp đầu tiên.

Cú pháp

element = document.querySelector(CSS selectors)

hoặc

element = baseElement.querySelector(CSS selectors);

Giá trị tham số

CSS selectors:

String.

Chỉ định một hoặc nhiều bộ chọn CSS để khớp với phần tử. Chúng được sử dụng để chọn các phần tử HTML dựa trên id, lớp, loại, thuộc tính, giá trị của thuộc tính, v.v.

Đối với nhiều bộ chọn, hãy tách riêng từng bộ chọn bằng dấu phẩy. Phần tử trả về phụ thuộc vào phần tử nào được tìm thấy đầu tiên trong tài liệu.

Giá trị trả về:

Một đối tượng NodeList, biểu diễn phần tử đầu tiên khớp với (các) bộ chọn CSS được chỉ định. Nếu không tìm thấy kết quả phù hợp, null sẽ được trả về. Ném ngoại lệ SYNTAX_ERR nếu bộ chọn được chỉ định không hợp lệ.

Ví dụ

Lấy phần tử <p> đầu tiên trong tài liệu:

var el = document.querySelector("p");

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

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

Lấy phần tử <p> đầu tiên là con của một phần tử <div>.

var el = document.querySelector("div > p");

Tìm phần tử đầu tiên khớp với một lớp

var el = document.querySelector(".myclass");

Một bộ chọn phức tạp hơn

var el = document.querySelector("div.user-panel.main input[name='login']");

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

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

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

<h2>A h2 element</h2>
<h3>A h3 element</h3>
<script>
	document.querySelector("h2, h3").style.backgroundColor = "red";
</script>

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

<h3>A h3 element</h3>
<h2>A h2 element</h2>
<script>
	document.querySelector("h2, h3").style.backgroundColor = "red";
</script>

Tính tương thích của trình duyệt web

Phương thức querySelector trên đối tượng document

Trình duyệt trên máy tính

Trình duyệt	Phiên bản tương thích
Chrome	1
Edge	Có
FireFox	3.5
Internet Eplorer	8
Opera	10
Safari	3.2

Trình duyệt trên thiết bị di động

Trình duyệt	Phiên bản tương thích
Android Webview	Có
Chrome for Android	Có
Edge Mobile	Có
FireFox for Android	Có
Opera	10
iOS Safari	3.2
Samsung Internet	?

Phương thức querySelector trên đối tượng Node

Trình duyệt trên máy tính

Trình duyệt	Phiên bản tương thích
Chrome	1
Edge	12
FireFox (Gecko)	3.5 (1.9.1)
Internet Eplorer	9 (IE8 chỉ hỗ trợ CSS 2.1 selectors)
Opera	Có
Safari	Có

Tham khảo:

• Web APIs: Đối tượng Document
• Web APIs: Đối tượng Node
• JavaScript: phương thức querySelectorAll
• CSS – Bộ chọn (Selectors) và cách sử dụng
• Bảng đối chiếu các CSS Selector