HTML DOM Document querySelector()
示例
獲取第一個 <p> 元素
document.querySelector("p");
自己動手試一試 »
獲取第一個 class="example" 的元素
document.querySelector(".example");
自己動手試一試 »
更多示例見下文。
描述
querySelector() 方法返回第一個匹配 CSS 選擇器的元素。
要返回所有匹配項（不僅僅是第一個），請改用 querySelectorAll()。
如果選擇器無效，querySelector() 和 querySelectorAll() 都會丟擲 SYNTAX_ERR 異常。
教程
QuerySelector 方法
GetElement 方法
HTMLCollection 和 NodeList 的區別
NodeList 和 HTMLCollection 非常相似。
兩者都是從文件中提取的節點（元素）的類陣列集合（列表）。節點可以透過索引號訪問。索引從 0 開始。
兩者都有一個 length 屬性，返回列表中（集合中）元素的數量。
HTMLCollection 是 文件元素 的集合。
NodeList 是 文件節點 的集合（元素節點、屬性節點和文字節點）。
HTMLCollection 的專案可以透過它們的名稱、ID 或索引號訪問。
NodeList 的專案只能透過它們的索引號訪問。
HTMLCollection 始終是 即時 集合。示例：如果您在 DOM 中向列表中新增一個 <li> 元素，HTMLCollection 中的列表也會隨之更改。
NodeList 通常是 靜態 集合。示例：如果您在 DOM 中向列表中新增一個 <li> 元素，NodeList 中的列表將不會更改。
getElementsByClassName() 和 getElementsByTagName() 方法返回一個即時的 HTMLCollection。
querySelectorAll() 方法返回一個靜態的 NodeList。
childNodes 屬性返回一個即時的 NodeList。
語法
document.querySelector(CSS 選擇器)
引數
| 引數 | 描述 |
| CSS 選擇器 |
必需。 一個或多個 CSS 選擇器。 CSS 選擇器根據 ID、類、型別、屬性、屬性值等選擇 HTML 元素。 有關完整列表，請參閱我們的 CSS 選擇器參考。 對於多個選擇器，請用逗號分隔每個選擇器（參見“更多示例”）。 |
返回值
| 型別 | 描述 |
| 物件 | 一個 NodeList，包含與 CSS 選擇器匹配的第一個元素。 如果沒有找到匹配項，則返回 null。 |
更多示例
選擇第一個 <h3> 或第一個 <h4>
<h3>一個 h3 元素</h3>
<h4>一個 h4 元素</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
自己動手試一試 »
選擇第一個 <h3> 或第一個 <h4>
<h4>一個 h4 元素</h4>
<h3>一個 h3 元素</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
自己動手試一試 »
瀏覽器支援
document.querySelector() 是 DOM Level 1 (1998) 的一個特性。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
