例
改變一個帶有class =“示例”的第一個子元素的文本<div>元素：
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML
= "Hello World!"; 試一試» 更多"Try it Yourself"下面的例子。
定義和用法
所述querySelector()方法返回在指定CSS相符的第一個子元素selector(s)的元素的。
注意： querySelector()方法僅返回指定選擇器相匹配的第一個元素。 要返回所有匹配，使用querySelectorAll()方法來代替。
有關CSS選擇的更多信息，請訪問我們的CSS選擇器教程和我們的CSS選擇參考 。
瀏覽器支持
在表中的數字規定，完全支持方法的第一個瀏覽器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| querySelector() | 4 | 8 | 3.5 | 3.2 | 10.0 |
句法
element .querySelector( CSS selectors )參數值
| 參數 | 類型 | 描述 |
|---|---|---|
| CSS selectors | String | 需要。 指定一個或多個CSS選擇器來匹配元素。 這些用於基於它們的ID，類類型，屬性，屬性值等來選擇HTML元素 對於多個選擇器，每個選擇用逗號分開。 返回元件取決於哪個元件首先被在文檔中找到(See "More Examples") 提示：對於所有的CSS選擇列表，看看我們的CSS選擇參考 。 |
技術細節
| DOM版本： | 選擇1級元素對象 |
|---|---|
| 返回值： | 指定的CSS匹配的第一個元件selector(s) 如果沒有找到匹配，則返回null。 引發一個例外SYNTAX_ERR如果指定的selector(s)是無效的。 |
更多示例
例
改變所述第一文本<p>在一個元件<div>元素：
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML
= "Hello World!"; 試一試» 例
改變所述第一文本<p>在帶有class =“例如”元素<div>元素：
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML
= "Hello World!"; 試一試» 例
改變元素的文本ID為在=“演示” <div>元素：
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML
= "Hello World!";
試一試» 例
紅色邊框添加到第一個<a>具有內部目標屬性元素<div>元素：
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border
= "10px solid red"; 試一試» 例
這個例子演示了如何選擇多個工作。
假定有兩個元素：一個<h2>和<h3>元素。
下面的代碼將添加背景顏色到所述第一<h2>在元件<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"; 試一試» 然而，如果<h3>元件被放置在之前<h2>在元件<div> 所述<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"; 試一試» 相關頁面
CSS教程： CSS選擇器
CSS參考： CSS選擇器參考
JavaScript的教程： JavaScript的HTML DOM節點列表
javascript參考： 文件。 querySelector()
javascript參考： 元素 。 querySelectorAll()
HTML DOM參考： 文件。 querySelectorAll()