JavaScript中的document.querySelector()方法使用详解
1. document.querySelector
document.querySelector 可以获取文档中的第一个匹配的元素。
这个函数返回匹配的元素（如果找到了匹配项），否则返回 null
1.1 语法：
const element = document.querySelector(selector);
1.2 示例
以下示例， 包含根据标签名选择，类名选择，属性名等选择元素
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Node-Link Tree</title>
</head>
<body>
<div class="container">
<h1>你好，2024！</h1>
<h2>你好.冬天</h2>
<p>龙马精神</p>
<span class="first">龙年大吉</span>
<p class="first">龙凤呈祥</p>
<br />
<a target="self">1.龙年行大运，祥瑞照门庭。岁月悠悠，情谊绵长，感恩有您相伴。愿您在新的一年里，如龙腾飞，事业兴旺；如龙入海，生活美满。祝您龙年吉祥如意！
</a>
<br>
<a target="_blank">龙年到来，祥瑞满天。愿您如龙般矫健，事业腾飞；如龙鳞闪耀，生活美满。祝您龙年大吉，万事如意！
</a>
</div>
<script>
// 标签名为 p 的第一个元素
document.querySelector("p").style.color = "red";
// class="first" 的第一个元素:
document.querySelector(".first").style.color = "green";
//签名为 p，且class="first" 的第一个元素
document.querySelector("p.first").style.background = "pink";
//带target属性的第一个a元素
document.querySelector("a[target]").style.background = "skyblue";
//target属性为_blank的第一个a元素
document.querySelector("a[target='_blank']").style.background = "skyblue";
//多元素选择时，根据文档，哪个在前面就先匹配哪个
document.querySelector("h1,h2").style.backgroundColor = "yellow";
</script>
</body>
</html>
2.querySelectorAll()
当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。 ---->querySelectorAll 得到一个伪数组 DOM。
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Node-Link Tree</title>
</head>
<body>
<div class="container">
<p>龙马精神</p>
<p class="first">龙凤呈祥</p>
</div>
<script>
// 标签名为 p 的第一个元素
var pAll = document.querySelectorAll("p")
pAll[0].style.color = 'pink'
console.log(pAll)
</script>
</body>
</html>
3.document.querySelector.bind和document.querySelectorAll.bind
定义全局的变量，方便直接获取dom
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Node-Link Tree</title>
</head>
<body>
<div class="container">
<p>龙马精神</p>
<span class="first">龙年大吉</span>
<p class="first">龙凤呈祥</p>
</div>
<script>
var query = document.querySelector.bind(document);
var query_tagname = query('p')
console.log(query_tagname)
query_tagname.style.color = 'red'
</script>
</body>
</html>
附：使用document.querySelector()搜索时,点‘.‘和井号‘#‘的用法
document.querySelector()用于选择文档中的元素，你可以根据元素的类型（标签名div/span）、类名(class)、或 id 来进行选择。在使用时，可以根据以下规则来确定何时使用点 (`.`) 和何时使用井号 (`#`)：
1. 使用点 (`.`)：
当你希望选择具有特定类名的元素时，使用点。
例如，`document.querySelector('.classname')` 会选择具有指定类名的元素。
例如，<div class="box"></div> ，你可以使用 `document.querySelector('.box')` 来选择它。
2. 使用井号 (`#`)：
当你希望选择具有特定 id 的元素时，使用井号。
例如，`document.querySelector('#elementId')` 会选择具有指定 id 的元素。
例如， <div id="myDiv"></div>，你可以使用 `document.querySelector('#myDiv')` 来选择它。
3. 使用标签名：
如果你想选择特定类型的元素，只需提供标签名即可。
例如，`document.querySelector('div')` 会选择页面上的第一个 `<div>` 元素。
这不需要点 (`.`) 或井号 (`#`) 前缀。
总之，前缀点 (`.`) 用于选择类名，前缀井号 (`#`) 用于选择 id，而不使用前缀时用于选择标签名。根据需要选择适当的前缀，以便准确地选择目标元素。
总结
到此这篇关于JavaScript中document.querySelector()方法使用详解的文章就介绍到这了,更多相关js document.querySelector()方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了TypeScript中函数重载写法，TypeScript 提供了函数重载功能，下面文章围绕TypeScript函数重载续航管资料展开内容,具有一定得参考价值，需要的朋友可以参考一下2021-12-12
下面小编就为大家带来一篇js控制div层的叠加简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
Javascript中的事件对象其实和.NET中继承自EventArgs类的派生类类似，用来给事件处理程序传递状态信息，从而进行相应的操作。这一篇文章将讲述Javascript事件对象中和实现拖拽功能相关的几个属性，并在最后将IE事件模型和标准DOM事件模型的差异封装到一个类中，从而适应所有的浏览器。2008-09-09
下面小编就为大家带来一篇JS判断输入的字符串是否是数字的方法(正则表达式)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
时间函数应用加、减、比较、格式转换等等，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要介绍了JavaScript反射与依赖注入,结合实例形式较为详细的分析了JavaScript反射与依赖注入的概念、原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了JavaScript实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
本文给大家汇总了2个原生JavaScript实现的计算器功能的代码，一个简单一个稍微复杂些，小伙伴们根据自己的需要来选择吧2016-10-10
微信小程序开发是依托微信的,所以他的代码是嵌入在微信的原始代码之中的,这篇文章主要给大家介绍了关于微信小程序实现文字长按复制与一键复制功能的相关资料,需要的朋友可以参考下2023-03-03
图片懒加载也是比较常见的一种性能优化的方法，本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例，这里整理了详细的代码,有需要的小伙伴可以参考下2017-06-06
最新评论