快捷導(dǎo)航

JavaScript中的document.querySelector()常見(jiàn)用法示例

更新時(shí)間：2025年06月16日 11:46:04 作者：手搓DesignPattern

這篇文章主要介紹了JavaScript中document.querySelector()常見(jiàn)用法的相關(guān)資料,document.querySelector()是JavaScript?DOM方法,通過(guò)CSS選擇器定位首個(gè)匹配元素,支持ID/類/標(biāo)簽等復(fù)雜選擇器,需要的朋友可以參考下

簡(jiǎn)介：

document.querySelector() 是 JavaScript 中用于在 HTML 文檔中查找元素的 DOM 方法。它通過(guò) CSS 選擇器定位元素，并返回第一個(gè)匹配的節(jié)點(diǎn)。如果未找到匹配項(xiàng)，則返回 null。

語(yǔ)法

const element = document.querySelector("CSS選擇器");

核心特點(diǎn)

僅返回第一個(gè)匹配項(xiàng)：即使有多個(gè)元素符合條件，也只返回第一個(gè)。
支持復(fù)雜選擇器：可以使用類、ID、屬性、偽類等任何有效的 CSS 選擇器。
作用范圍靈活：不僅可以在 document 上調(diào)用，也可以在任意元素上調(diào)用，限制搜索范圍為該元素的子節(jié)點(diǎn)。

常見(jiàn)用法示例

1. 按 ID 查找

const header = document.querySelector("#header"); // 查找 ID 為 "header" 的元素

2. 按類名查找

const btn = document.querySelector(".btn-primary"); // 查找第一個(gè)類名包含 "btn-primary" 的元素

3. 按標(biāo)簽名查找

const firstImg = document.querySelector("img"); // 查找第一個(gè) <img> 標(biāo)簽

4. 組合選擇器

const item = document.querySelector("ul.menu > li.active"); 
// 查找類為 "menu" 的 <ul> 下的第一個(gè)類為 "active" 的 <li>

5. 屬性選擇器

const link = document.querySelector("a[target='_blank']"); 
// 查找第一個(gè)帶有 `target="_blank"` 的 <a> 標(biāo)簽

6. 偽類選擇器

const firstInput = document.querySelector("input:first-of-type"); 
// 查找同層級(jí)中的第一個(gè) <input>

對(duì)比其他方法

方法	返回值	是否動(dòng)態(tài)更新	選擇器類型
`querySelector()`	第一個(gè)元素	否	CSS 選擇器
`querySelectorAll()`	所有元素集合	否	CSS 選擇器
`getElementById()`	單個(gè)元素	否	ID
`getElementsByClassName()`	HTML集合	是	類名

總結(jié)

到此這篇關(guān)于JavaScript中document.querySelector()常見(jiàn)用法的文章就介紹到這了,更多相關(guān)js中document.querySelector()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: