JavaScript中的document.querySelector()常見用法示例
更新時間：2025年06月16日 11:46:04 作者：手搓DesignPattern
這篇文章主要介紹了JavaScript中document.querySelector()常見用法的相關資料,document.querySelector()是JavaScript?DOM方法,通過CSS選擇器定位首個匹配元素,支持ID/類/標簽等復雜選擇器,需要的朋友可以參考下
簡介：
document.querySelector() 是 JavaScript 中用于在 HTML 文檔中查找元素的 DOM 方法。它通過 CSS 選擇器定位元素，并返回第一個匹配的節(jié)點。如果未找到匹配項，則返回 null。
語法
const element = document.querySelector("CSS選擇器");核心特點
僅返回第一個匹配項：即使有多個元素符合條件，也只返回第一個。
支持復雜選擇器：可以使用類、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集合 | 是 | 類名 |
總結
到此這篇關于JavaScript中document.querySelector()常見用法的文章就介紹到這了,更多相關js中document.querySelector()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Webpack打包文件體積過大是前端開發(fā)中常見的問題,過大的打包文件會導致應用加載緩慢,影響用戶體驗本文主要介紹了優(yōu)化Webpack打包后文件的體積,具有一定的參考價值,感興趣的可以了解一下2025-06-06
這篇文章主要介紹了JS模擬實現(xiàn)哈希表及應用,結合實例形式分析了javascript模擬實現(xiàn)哈希表的步驟、相關操作技巧與使用方法,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了JS onmousemove鼠標移動坐標接龍DIV效果實例，有需要的朋友可以參考一下2013-12-12
javascript在處理圖像的能力其實是不弱的，可惜瀏覽器大戰(zhàn)連累了它，這還不算，Adobe 收購Macromedia更讓SVG處于怠工狀態(tài)。2009-10-10
用js獲取頁面值得仿佛，需要的朋友可以參考下。2011-11-11
下拉選擇框想必大家并不陌生，一邊情況下都是使用默認的，為了打破傳統(tǒng)，下面與大家分享下使用js自定義下拉選擇框示例代碼,感興趣的朋友可以參考下2013-08-08
這篇文章主要為大家詳細介紹了前端天氣插件tpwidget使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
javascript下操作css的float屬性的特殊寫法...2007-08-08
js String.prototype.trim字符去前后空格的擴展
這篇文章主要介紹了js String.prototype.trim字符去前后空格的擴展,需要的朋友可以參考下2020-04-04
在數(shù)據(jù)可視化大屏中,滾動表格是一種常見的需求,本文介紹了如何利用scrollTop屬性和定時器來制作滾動效果,不依賴于任何插件,可以實現(xiàn)自定義的滾動表格,文中通過代碼介紹是非常詳細,需要的朋友可以參考下2024-09-09