本文详解JavaScript中document.querySelector与querySelectorAll方法的使用。前者返回首个匹配元素，后者返回NodeList集合。文章涵盖语法、选择器类型（标签、类、ID）及前缀用法，并介绍通过bind简化全局调用的技巧，帮助开发者高效操作DOM节点。
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 集合。其查找规则与前述方法一致，最终得到的是一个伪数组形式的 DOM 集合。
ParentNode.querySelectorAll() 返回的是 NodeList 数组，但它并非标准的 JavaScript 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()方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！