HTML DOM querySelector() 方法
實例
修改id="demo" 的<div>元素的第一個子元素文本內容：
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
x.querySelector("#demo").innerHTML = "Hello World!";
嘗試一下»
定義與用法
querySelector() 方法返回匹配指定CSS 選擇器元素的第一個子元素。
注意： querySelector()方法只返回匹配指定選擇器的第一個元素。 如果你要返回所有匹配元素，請使用querySelectorAll() 方法替代。
對於更多的CSS選擇，可以訪問我們的CSS選擇器教程和我們的CSS選擇器參考手冊 。
瀏覽器支持
表格中的數字表示支持該方法的第一個瀏覽器的版本號。
| 方法 | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.1 | 10.0 |
語法
element .querySelector( CSS選擇器 )
參數值
| 參數 | 類型 | 描述 |
|---|---|---|
| CSS選擇器 | String | 必須。 指定一個或多個匹配元素的CSS 選擇器。 可以使用它們的id, 類, 類型, 屬性, 屬性值等來選取元素。 對於多個選擇器，使用逗號隔開，返回一個匹配的元素。 提示：更多CSS選擇器，請參閱我們的CSS選擇器參考手冊 。 |
技術細節
| DOM 版本: | Selectors Level 1 Element Object |
|---|---|
| 返回值: | 匹配指定CSS 選擇器的第一個元素。 如果沒有找到，返回null。 如果指定了非法選擇器則拋出SYNTAX_ERR 異常。 |
更多實例
實例
修改<div> 元素中的第一個<p> 元素內容：
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
x.querySelector("p").innerHTML = "Hello World!";
嘗試一下»
實例
修改<div> 元素中第一個class="example" 的子元素內容：
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
x.querySelector(".example").innerHTML = "Hello World!";
嘗試一下»
實例
修改<div> 元素中第一個class="example" 的<p> 元素：
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
x.querySelector("p.example").innerHTML = "Hello World!";
嘗試一下»
實例
為<div> 元素中的第一個有target 屬性的<a> 元素添加紅色邊框：
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
x.querySelector("a[target]").style.border = "10px solid red";
嘗試一下»
實例
以下實例演示了多個選擇器的使用方法。
假定你選擇了兩個選擇器: <h2> 和<h3> 元素。
以下代碼將為<div> 元素的第一個<h2> 元素添加背景顏色：
<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";
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
嘗試一下»
但是，如果<div> 元素中<h3> 元素位於<h2> 元素之前，<h3> 元素將會被設置指定的背景顏色。
<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";
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
嘗試一下»
相關頁面
JavaScript參考手冊: document.querySelector()