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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
echarts動(dòng)態(tài)渲染柱狀圖背景顏色及頂部數(shù)值方法詳解
在使用echarts時(shí),有時(shí)需要給柱狀圖設(shè)置背景,下面這篇文章主要給大家介紹了關(guān)于echarts動(dòng)態(tài)渲染柱狀圖背景顏色及頂部數(shù)值的相關(guān)資料,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
在js中有一個(gè)運(yùn)算符可以幫助我們判斷一個(gè)值的類型，它就是typeof運(yùn)算符。下面通過(guò)本文給大家分享JavaScript中如何判斷一個(gè)值的類型，需要的朋友參考下吧2017-09-09
JavaScript中有七種原始數(shù)據(jù)類型和幾種引用數(shù)據(jù)類型,本文將清楚地介紹四種用于類型判斷的方法,分別是typeOf、instanceOf、Object.prototype.toString.call()、Array.isArray(),并介紹其使用方法和判定原理,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細(xì)介紹了使用js實(shí)現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
window.location.href IE下跳轉(zhuǎn)失效的解決方法
這篇文章主要介紹了window.location.href IE下跳轉(zhuǎn)失效的解決方法,需要的朋友可以參考下2014-03-03
人人網(wǎng)javascript面試題 可以提前實(shí)現(xiàn)下
JavaScript面試題要求：以下題目必須從一至四題中，選出三道題，使用原生代碼實(shí)現(xiàn)，不可使用任何框架，第五題為選作題2012-01-01
JavaScript新手必看之var在for循環(huán)中的坑
var這個(gè)關(guān)鍵字在JS當(dāng)中是相當(dāng)常用的，但同時(shí)配合到for循環(huán)的話會(huì)出現(xiàn)不符合預(yù)期的運(yùn)行結(jié)果，所以本文就來(lái)為大家講講如何避免這種情況的出現(xiàn)2023-05-05
iframe與主框架跨域相互訪問(wèn)實(shí)現(xiàn)方法
今天正好需要用到iframe 與主框架相互訪問(wèn)的實(shí)現(xiàn)方法，正好看到了這篇文章，確實(shí)不錯(cuò)，特分享一下,需要的朋友可以參考下2017-09-09
本文給大家總結(jié)了一下常見(jiàn)的javascript檢驗(yàn)各種規(guī)則的代碼，通過(guò)正則表達(dá)式來(lái)實(shí)現(xiàn)，都是項(xiàng)目中經(jīng)常需要用到的，有需要的小伙伴可以參考下。2015-07-07
Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用實(shí)例詳解
這篇文章主要介紹了Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用,需要的朋友可以參考下2017-04-04