HTML DOM querySelector() 方法
示例
更改 <div> 元素中第一個帶有 class="example" 的子元素的文字
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
自己動手試一試 »
更多“自己嘗試”的例子見下文。
描述
querySelector() 方法返回與元素指定 *CSS 選擇器*匹配的第一個子元素。
注意： querySelector() 方法只返回與指定選擇器匹配的第一個元素。要返回所有匹配項，請改用 querySelectorAll() 方法。
另請參閱
教程
瀏覽器支援
表格中的數字指定了完全支援該方法的第一個瀏覽器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
語法
element.querySelector(CSS 選擇器)
引數值
| 引數 | 型別 | 描述 |
|---|---|---|
| CSS 選擇器 | 字串 | 必需。指定一個或多個 CSS 選擇器以匹配元素。這些選擇器用於根據 HTML 元素的 ID、類、型別、屬性、屬性值等來選擇 HTML 元素。 對於多個選擇器，請用逗號分隔每個選擇器。返回的元素取決於文件中首先找到的元素（參見“更多示例”）。 提示： 有關所有 CSS 選擇器的列表，請檢視我們的 CSS 選擇器參考。 |
技術詳情
| DOM 版本 | 選擇器級別 1 元素物件 |
|---|---|
| 返回值 | 與指定 CSS 選擇器匹配的第一個元素。如果沒有找到匹配項，則返回 null。如果指定的選擇器無效，則丟擲 SYNTAX_ERR 異常。 |
更多示例
示例
更改 <div> 元素中第一個 <p> 元素的文字
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
自己動手試一試 »
示例
更改 <div> 元素中第一個帶有 class="example" 的 <p> 元素的文字
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
自己動手試一試 »
示例
更改 <div> 元素中帶有 id="demo" 的元素的文字
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
自己動手試一試 »
示例
在 <div> 元素內部為第一個帶有 target 屬性的 <a> 元素新增紅色邊框
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
自己動手試一試 »
示例
此示例演示了多個選擇器如何工作。
假設您有兩個元素：一個 <h2> 和一個 <h3> 元素。
以下程式碼將為 <div> 中第一個 <h2> 元素新增背景顏色
<div id="myDIV">
<h2>一個 h2 元素</h2>
<h3>一個 h3 元素</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
自己動手試一試 »
但是，如果 <h3> 元素在 <div> 中放置在 <h2> 元素之前。那麼 <h3> 元素將獲得紅色背景顏色。
<div id="myDIV">
<h3>一個 h3 元素</h3>
<h2>一個 h2 元素</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
自己動手試一試 »
相關頁面
CSS 教程：CSS 選擇器
CSS 參考：CSS 選擇器參考
JavaScript 教程：JavaScript HTML DOM 節點列表
JavaScript 參考：document.querySelector()
JavaScript 參考：element.querySelectorAll()
HTML DOM 參考：document.querySelectorAll()
