本文主要介绍JavaScript选择器函数querySelector和querySelectorAll。以下文章重点介绍了querySelector和querySelectorAll的相关信息，有需要的朋友可以参考一下。
:
目录
1.querySelector查询单个元素1。文档实例调用2。元素实例调用2。querySelectorAll查询所有元素1。对于在遍历问题2。快照代替实时问题3。摘要选择器是Css的一个非常强大的功能。早期通常通过getElementById和getElementsByTagName获取页面元素，在某些场景下不方便。
后来DOM扩展了选择器API标准，其中选择器API一级包含了querySelector和Query Selector两个方法，可以通过Css选择器匹配页面元素。
一、querySelector查询单个元素
QuerySelector用于查询页面中符合规则的第一个元素。可以在文档实例和元素实例上调用它，并接收选择器字符串参数。如果找到它，它将返回一个HTMLElement对象，否则将返回null。
语法格式如下：
文档实例；querySelector(选择器字符串)；
元素实例；querySelector(选择器字符串)；
1. Document实例调用
文档实例调用是获取整个页面的匹配元素。
简单示例如下：
//获取正文元素
let body=document . query selector(' body ')；
console.log(body)
//获取id为container的元素，只获取第一个
let container=document . query selector(“# container”)；
console.log(容器)
//获取类中包含btn的元素，只获取第一个
let btn=document.querySelector('。BTN’)；
console . log(BTN)；
//获取container的直接子类类中包含btn的元素，只获取第一个
let container BTN=document . query selector(' # container . BTN ')；
console . log(container TN)；
2. Element实例调用
实例调用是为了获取元素的子树中匹配的元素。
简单示例：
//获取容器ID的元素
let container=document . query selector(“# container”)；
//需要检查元素对象是否存在，这样才有querySelector方法。
如果(容器){
//仅在容器中查找其类包含btn的元素。
let container BTN=container . query selector('。BTN’)；
console . log(container TN)；
}
从理论上讲，由于Css可以通过选择器获取页面的任意元素，所以元素实例调用可以直接写成文档实例的调用方式，只需要修改选择器字符串参数即可。
例如上例就可以直接写成如下方式：
let container BTN=document . query selector(' # container。BTN’)；
而且因为少了一个if判断，代码更简洁。当然，在某些业务场景中，元素实例已经确定，用元素实例直接调用更方便。
二、querySelectorAll查询所有元素
querySelectorAll方法类似于querySelector方法，只是它返回所有匹配的元素，并且它的类型是NodeList。
简单示例：
//假设页面有两个包含article的div类名
//获取包含article的所有类的元素
let article list=document . query selector all('。文章’)；
console.log(文章列表)；
console . log(article list . length)；
//控制台输出：
//NodeList(2) [div.article，div.article]
//2
querySelectorAll方法返回所有元素，实际中经常需要遍历这些元素。遍历可以使用常规的for遍历、for遍历和forEach遍历。
//for of遍历
对于(物品清单的第一项)
console . log(item)；
}
//用于遍历
for(设I=0；I文章列表.长度；i ) {
console . log(article list[I])；
console . log(article list . item(I))；
}
//forEach遍历
articleList.forEach((item，index)={
console.log(项目，索引)；
});
1、for in遍历的问题
如果在遍历中使用for，也会遍历原型链中的一些方法，比如entries、forEach等。
2、快照而非实时的问题
使用querySelectorAll方法获得的NodeList是快照，而不是实时数据。
请看下面这个例子：
//使用querySelectorAll获取，articleList是静态的，不是实时的。
let article list=document . query selector all('。文章’)；
console.log(文章列表)；
console . log(article list . length)；//2
setTimeout(()={
//添加一个元素
let div=document . createelement(' div ')；
div . class name=" article "；
文档。身体。追加子级(div)；
console.log(文章列表):
//依旧为2
控制台。日志(文章列表。长度)；
},0;
最后设置了一个定时器，往页面塞了一个类为文章内容的div(消歧义)元素，但是文章列表的长度依旧是2个。
如果是用获取元素sbyclasse名称获取，那么文章列表就是实时的数据。
请看如下例子：美元
//使用getelementsbyclassname获取，文章列表是实时的
让文章列表=文档。getelementsbyclasname(“article”)；
console.log(文章列表):
控制台。日志(文章列表。长度)；
setTimeout()
//增加一个元素
让div=document。创建元素(' div '):
div。class name=' item
文档。身体。追加子级(div)；
console.log(文章列表):
//这里为3
控制台。日志(文章列表。长度)；
},0;
在控制台查看打印结果：美元
HTMLCollection动态效果：美元
使用getelementsbyclassname获取的对象是html集合(html集合)类型，会随文档流变化而变化。
三、小结
1 .查询选择器-查询选取器和querySelectorAll(查询选取器)根据CSS(CSS)选择器获取页面元素，功能很强大。
2.querySelectorAll(查询选取器)获取的元素是快照，静态的，而非实时的，注意踩坑。
到此这篇关于JavaScript(JavaScript)选择器函数查询选择器-查询选取器和querySelectorAll(查询选取器)的文章就介绍到这了，更多相关JavaScript(JavaScript)中的查询选择器-查询选取器和querySelectorAll(查询选取器)内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。