免費(fèi)AI編程助手
HTML DOM querySelector() 方法
Document 對(duì)象定義和用法
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個(gè)元素。
注意： querySelector() 方法僅僅返回匹配指定選擇器的第一個(gè)元素。如果你需要返回所有的元素，請(qǐng)使用querySelectorAll() 方法替代。
更多 CSS 選擇器，請(qǐng)?jiān)L問(wèn)我們的CSS 選擇器參考手冊(cè) 。
瀏覽器支持
表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。
| 方法 | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.1 | 10.0 |
語(yǔ)法
document.querySelector(CSS selectors)
參數(shù)值
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| CSS 選擇器 | String | 必須。指定一個(gè)或多個(gè)匹配元素的 CSS 選擇器。 可以使用它們的 id, 類(lèi), 類(lèi)型, 屬性, 屬性值等來(lái)選取元素。 對(duì)于多個(gè)選擇器，使用逗號(hào)隔開(kāi)，返回一個(gè)匹配的元素。 提示： 更多 CSS 選擇器，請(qǐng)參閱我們的CSS 選擇器參考手冊(cè)。 |
技術(shù)細(xì)節(jié)
| DOM 版本: | Selectors Level 1 Document Object |
|---|---|
| 返回值: | 匹配指定 CSS 選擇器的第一個(gè)元素。如果沒(méi)有找到，返回 null。如果指定了非法選擇器則拋出 SYNTAX_ERR 異常。 |
更多實(shí)例
實(shí)例
以下實(shí)例演示了多個(gè)選擇器的使用方法。
假定你選擇了兩個(gè)選擇器: <h2> 和 <h3> 元素。
以下代碼將為文檔的第一個(gè) <h2> 元素添加背景顏色：
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";
<h3>A h3 element</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";
嘗試一下 ?
但是，如果文檔中 <h3> 元素位于 <h2> 元素之前，<h3> 元素將會(huì)被設(shè)置指定的背景顏色。
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2, h3").style.backgroundColor = "red";
<h2>A h2 element</h2>
document.querySelector("h2, h3").style.backgroundColor = "red";
嘗試一下 ?
相關(guān)頁(yè)面
JavaScript 參考手冊(cè): element.querySelector()
更多建議：