HTML DOM querySelector() 方法

Document 對象參考手冊 Document 對象

實例

獲取文檔中 id="demo" 的元素：

document.querySelector("#demo");

定義和用法

querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。

注意： querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。

更多 CSS 選擇器，請訪問我們的 CSS 選擇器教程 和我們的 CSS 選擇器參考手冊。

流覽器支持

表格中的數字表示支持該方法的第一個流覽器的版本號。

方法
querySelector() 4.0 8.0 3.5 3.1 10.0

語法

document.querySelector(CSS selectors)

參數值

參數 類型 描述
CSS 選擇器 String 必須。指定一個或多個匹配元素的 CSS 選擇器。 可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。

對於多個選擇器，使用逗號隔開，返回一個匹配的元素。

提示： 更多 CSS 選擇器，請參閱我們的 CSS 選擇器參考手冊。

技術細節

DOM 版本: Selectors Level 1 Document Object
返回值: 匹配指定 CSS 選擇器的第一個元素。 如果沒有找到，返回 null。如果指定了非法選擇器則 拋出 SYNTAX_ERR 異常。

更多實例

實例

獲取文檔中第一個 <p> 元素：

document.querySelector("p");


實例

獲取文檔中 class="example" 的第一個元素:

document.querySelector(".example");


實例

獲取文檔中 class="example" 的第一個 <p> 元素:

document.querySelector("p.example");


實例

獲取文檔中有 "target" 屬性的第一個 <a> 元素：

document.querySelector("a[target]");


實例

以下實例演示了多個選擇器的使用方法。

假定你選擇了兩個選擇器: <h2> 和 <h3> 元素。

以下代碼將為文檔的第一個 <h2> 元素添加背景顏色：

<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";

但是，如果文檔中 <h3> 元素位於 <h2> 元素之前，<h3> 元素將會被設置指定的背景顏色。

<h3>A h3 element</h3>
<h2>A h2 element</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";


相關頁面

JavaScript 參考手冊: element.querySelector()

Document 對象參考手冊 Document 對象