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 选择器定位元素，并返回第一个匹配的节点。如果未找到匹配项，则返回 null。

语法

const element = document.querySelector("CSS选择器");

核心特点

仅返回第一个匹配项：即使有多个元素符合条件，也只返回第一个。
支持复杂选择器：可以使用类、ID、属性、伪类等任何有效的 CSS 选择器。
作用范围灵活：不仅可以在 document 上调用，也可以在任意元素上调用，限制搜索范围为该元素的子节点。

常见用法示例

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>

对比其他方法

方法	返回值	是否动态更新	选择器类型
`querySelector()`	第一个元素	否	CSS 选择器
`querySelectorAll()`	所有元素集合	否	CSS 选择器
`getElementById()`	单个元素	否	ID
`getElementsByClassName()`	HTML集合	是	类名

总结

到此这篇关于JavaScript中document.querySelector()常见用法的文章就介绍到这了,更多相关js中document.querySelector()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

echarts动态渲染柱状图背景颜色及顶部数值方法详解
在使用echarts时,有时需要给柱状图设置背景,下面这篇文章主要给大家介绍了关于echarts动态渲染柱状图背景颜色及顶部数值的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
JavaScript中如何判断一个值的类型
在js中有一个运算符可以帮助我们判断一个值的类型，它就是typeof运算符。下面通过本文给大家分享JavaScript中如何判断一个值的类型，需要的朋友参考下吧
2017-09-09
JS类型判断的四种方法详解
JavaScript中有七种原始数据类型和几种引用数据类型,本文将清楚地介绍四种用于类型判断的方法,分别是typeOf、instanceOf、Object.prototype.toString.call()、Array.isArray(),并介绍其使用方法和判定原理,需要的朋友可以参考下
2024-08-08
使用js实现瀑布流效果
这篇文章主要为大家详细介绍了使用js实现瀑布流效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
window.location.href IE下跳转失效的解决方法
这篇文章主要介绍了window.location.href IE下跳转失效的解决方法,需要的朋友可以参考下
2014-03-03
人人网javascript面试题可以提前实现下
JavaScript面试题要求：以下题目必须从一至四题中，选出三道题，使用原生代码实现，不可使用任何框架，第五题为选作题
2012-01-01
JavaScript新手必看之var在for循环中的坑
var这个关键字在JS当中是相当常用的，但同时配合到for循环的话会出现不符合预期的运行结果，所以本文就来为大家讲讲如何避免这种情况的出现
2023-05-05
iframe与主框架跨域相互访问实现方法
今天正好需要用到iframe 与主框架相互访问的实现方法，正好看到了这篇文章，确实不错，特分享一下,需要的朋友可以参考下
2017-09-09
javascript常用正则表达式汇总
本文给大家总结了一下常见的javascript检验各种规则的代码，通过正则表达式来实现，都是项目中经常需要用到的，有需要的小伙伴可以参考下。
2015-07-07
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下
2017-04-04