HTML DOM Document querySelector() 方法

定義和用法

querySelector() 方法返回與 CSS 選擇器匹配的第一個元素。

如需返回所有匹配項（不僅是第一個匹配項），請改用 querySelectorAll()。

如果選擇器無效，則 querySelector() 和 querySelectorAll() 都會拋出 SYNTAX_ERR 異常。

實例

例子 1

獲取第一個 <p> 元素：

document.querySelector("p");

親自試一試

例子 2

獲取 class="example" 的第一個元素：

document.querySelector(".example");

親自試一試

例子 3

獲取 class="example" 的第一個 <p> 元素：

document.querySelector("p.example");

親自試一試

例子 4

更改 id="demo" 的元素的文本：

document.querySelector("#demo").innerHTML = "Hello World!";

親自試一試

例子 5

選擇第一個其父元素是 <div> 元素的 <p> 元素：

document.querySelector("div > p");

親自試一試

例子 6

選擇第一個擁有 "target" 屬性的 <a> 元素：

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

親自試一試

例子 7

選擇第一個 <h3> 或第一個 <h4>：

<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

親自試一試

例子 8

選擇第一個 <h3> 或第一個 <h4>：

<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

親自試一試

語法

document.querySelector(cssSelectors)

參數

參數 描述
cssSelectors

必需。一個或多個 CSS 選擇器。

CSS 選擇器根據 id、類、類型、屬性、屬性值等選擇 HTML 元素。

如需完整列表，請訪問我們的 CSS 選擇器參考手冊。

對于多個選擇器，請用逗號分隔每個選擇器（請參閱頁面上方的實例）。

返回值

類型 描述
對象

包含與 CSS 選擇器匹配的第一個元素的 NodeList。

如果沒有找到匹配項，則返回 null。

HTMLCollection 和 NodeList 的區別

NodeList 和 HTMLcollection 非常相似。

兩者都是從文檔中提取的節點（元素）的類似數組的集合（列表）。可以通過索引號（下標）訪問節點。索引從 0 開始。

兩者都有 length 屬性，它返回列表（集合）中元素的數量。

HTMLCollection 是文檔元素的集合。

NodeList 是文檔節點（元素節點、屬性節點和文本節點）的集合。

HTMLCollection 項目可以通過它們的名稱、id 或索引號來訪問。

NodeList 項目只能通過它們的索引號訪問。

HTMLCollection 始終是實時的集合。

例如：如果將 <li> 元素添加到 DOM 中的列表，則 HTMLCollection 中的列表也會發生變化。

NodeList 通常是靜態的集合。

例如：如果將 <li> 元素添加到 DOM 中的列表，則 NodeList 中的列表不會改變。

getElementsByClassName() 和 getElementsByTagName() 方法都返回實時 HTMLCollection。

querySelectorAll() 方法返回靜態 NodeList。

childNodes 屬性返回實時 NodeList。

瀏覽器支持

document.querySelector() 是 DOM Level 1 (1998) 特性。

所有瀏覽器都支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相關頁面

教程：

CSS 選擇器

CSS 選擇器參考手冊

HTML DOM NodeList 參考手冊

QuerySelector 方法：

querySelector() 方法

querySelectorAll() 方法

GetElement 方法：

getElementById() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法