JavaScript中的document.querySelector()常見用法示例
更新時間：2025年06月16日 11:46:04 作者：手搓DesignPattern
這篇文章主要介紹了JavaScript中document.querySelector()常見用法的相關(guān)資料,document.querySelector()是JavaScript?DOM方法,通過CSS選擇器定位首個匹配元素,支持ID/類/標簽等復(fù)雜選擇器,需要的朋友可以參考下
簡介：
document.querySelector() 是 JavaScript 中用于在 HTML 文檔中查找元素的 DOM 方法。它通過 CSS 選擇器定位元素，并返回第一個匹配的節(jié)點。如果未找到匹配項，則返回 null。
語法
const element = document.querySelector("CSS選擇器");核心特點
僅返回第一個匹配項：即使有多個元素符合條件，也只返回第一個。
支持復(fù)雜選擇器：可以使用類、ID、屬性、偽類等任何有效的 CSS 選擇器。
作用范圍靈活：不僅可以在
document上調(diào)用，也可以在任意元素上調(diào)用，限制搜索范圍為該元素的子節(jié)點。
常見用法示例
1. 按 ID 查找
const header = document.querySelector("#header"); // 查找 ID 為 "header" 的元素2. 按類名查找
const btn = document.querySelector(".btn-primary"); // 查找第一個類名包含 "btn-primary" 的元素3. 按標簽名查找
const firstImg = document.querySelector("img"); // 查找第一個 <img> 標簽4. 組合選擇器
const item = document.querySelector("ul.menu > li.active");
// 查找類為 "menu" 的 <ul> 下的第一個類為 "active" 的 <li>5. 屬性選擇器
const link = document.querySelector("a[target='_blank']");
// 查找第一個帶有 `target="_blank"` 的 <a> 標簽6. 偽類選擇器
const firstInput = document.querySelector("input:first-of-type");
// 查找同層級中的第一個 <input>對比其他方法
| 方法 | 返回值 | 是否動態(tài)更新 | 選擇器類型 |
|---|---|---|---|
querySelector() | 第一個元素 | 否 | CSS 選擇器 |
querySelectorAll() | 所有元素集合 | 否 | CSS 選擇器 |
getElementById() | 單個元素 | 否 | ID |
getElementsByClassName() | HTML集合 | 是 | 類名 |
總結(jié)
到此這篇關(guān)于JavaScript中document.querySelector()常見用法的文章就介紹到這了,更多相關(guān)js中document.querySelector()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
echarts動態(tài)渲染柱狀圖背景顏色及頂部數(shù)值方法詳解
在使用echarts時,有時需要給柱狀圖設(shè)置背景,下面這篇文章主要給大家介紹了關(guān)于echarts動態(tài)渲染柱狀圖背景顏色及頂部數(shù)值的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
在js中有一個運算符可以幫助我們判斷一個值的類型，它就是typeof運算符。下面通過本文給大家分享JavaScript中如何判斷一個值的類型，需要的朋友參考下吧2017-09-09
JavaScript中有七種原始數(shù)據(jù)類型和幾種引用數(shù)據(jù)類型,本文將清楚地介紹四種用于類型判斷的方法,分別是typeOf、instanceOf、Object.prototype.toString.call()、Array.isArray(),并介紹其使用方法和判定原理,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細介紹了使用js實現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
window.location.href IE下跳轉(zhuǎn)失效的解決方法
這篇文章主要介紹了window.location.href IE下跳轉(zhuǎn)失效的解決方法,需要的朋友可以參考下2014-03-03
人人網(wǎng)javascript面試題 可以提前實現(xiàn)下
JavaScript面試題要求：以下題目必須從一至四題中，選出三道題，使用原生代碼實現(xiàn)，不可使用任何框架，第五題為選作題2012-01-01
JavaScript新手必看之var在for循環(huán)中的坑
var這個關(guān)鍵字在JS當中是相當常用的，但同時配合到for循環(huán)的話會出現(xiàn)不符合預(yù)期的運行結(jié)果，所以本文就來為大家講講如何避免這種情況的出現(xiàn)2023-05-05
今天正好需要用到iframe 與主框架相互訪問的實現(xiàn)方法，正好看到了這篇文章，確實不錯，特分享一下,需要的朋友可以參考下2017-09-09
本文給大家總結(jié)了一下常見的javascript檢驗各種規(guī)則的代碼，通過正則表達式來實現(xiàn)，都是項目中經(jīng)常需要用到的，有需要的小伙伴可以參考下。2015-07-07
Bootstrap進度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用實例詳解
這篇文章主要介紹了Bootstrap進度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用,需要的朋友可以參考下2017-04-04