Phương thức querySelector() của DOM DOM
Ví 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!";
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Sự miêu tả
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 khớp với các bộ chọn đã chỉ định. Để trả về tất cả các kết quả khớp, thay vào đó hãy sử dụng phương thức querySelectorAll() .
Xem thêm:
Phương thức querySelectorAll()
Phương thức getElementsByTagName()
Phương thức getElementsByClassName()
Hướng dẫn:
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ả về: | 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 ra một ngoại lệ SYNTAX_ERR nếu (các) bộ chọn được chỉ định không hợp lệ. |
Thêm ví dụ
Ví 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!";
Hãy tự mình thử »Ví 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!";
Hãy tự mình thử »Ví dụ
Thay đổi văn bản của một phần tử có id="demo" trong phần tử <div>:
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
Hãy tự mình thử »Ví 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";
Hãy tự mình thử »Ví 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ử: phần tử <h2> và <h3>.
Đoạn mã sau sẽ thêm màu nền cho 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";
Hãy tự mình thử »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";
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Bộ chọn CSS
Tham khảo CSS: Tham khảo bộ chọn CSS
Hướng dẫn JavaScript: Danh sách nút JavaScript HTML DOM
Tham khảo JavaScript: document.querySelector()
Tham chiếu JavaScript: phần tử .querySelectorAll()
Tham chiếu DOM HTML: document.querySelectorAll()