JavaScript选择器函数querySelector和querySelectorAll


Posted in Javascript onNovember 27, 2021

选择器是Css非常强大的功能,早先一般是通过getElementByIdgetElementsByTagName来获取页面元素,在一些场景下就很不方便。

后来DOM扩展出了Selector API标准,其中 Selector API Level 1 包含了querySelectorquerySelectorAll两个方法,可以通过Css选择器匹配页面元素。

一、querySelector查询单个元素

querySelector用于查询页面中第一个符合规则的元素,可以在Document实例和Element实例上调用,接收一个选择器字符串参数,如果查找到则返回 HTMLElement 对象,否则返回null

语法格式如下:

Document实例.querySelector(选择器字符串);

Element实例.querySelector(选择器字符串);

1. Document实例调用

Document实例调用是获取整个页面匹配的元素。

简单示例如下:

// 获取body元素

let body = document.querySelector("body");

console.log(body)

// 获取id为container的元素,只会获取第一个

let container = document.querySelector("#container");

console.log(container)

// 获取class中包含btn的元素,只会获取第一个

let btn = document.querySelector(".btn");

console.log(btn);



// 获取container直接子类class中包含btn的元素,只会获取第一个

let containerBtn = document.querySelector("#container>.btn");

console.log(containerBtn);

2. Element实例调用

Element实例调用是获取该元素子树内匹配的元素。

简单示例:

 

// 获取ID为container的元素

let container = document.querySelector("#container");

// 需要检测元素对象是否存在,存在才有 querySelector 方法

if (container) {

	// 只查找 container 内class包含 btn 的元素。

	let containerBtn = container.querySelector(".btn");

	console.log(containerBtn);

}

理论上来讲,因为Css可以通过选择器获取页面任意的元素,所以Element实例调用可以直接写成Document实例的调用方式,只需要修改选择器字符串参数即可。

例如上例就可以直接写成如下方式:

let containerBtn = document.querySelector("#container .btn");

并且因为少了一个if判断,代码就更加简洁。当然在有些业务场景下,ELement实例是已经确定的了,那么直接用 ELement实例 调用就更加方便了。

二、querySelectorAll查询所有元素

querySelectorAll方法和querySelector方法类似,只是它是返回所有匹配的元素,类型是NodeList

简单示例:

 

// 假设页面有两个div类名包含 article

// 获取所有类包含 article 的元素

let articleList = document.querySelectorAll(".article");

console.log(articleList);

console.log(articleList.length);

// 控制台输出:

//	NodeList(2) [div.article, div.article]

//	2

querySelectorAll方法返回的是所有元素,在实务中经常需要遍历,遍历可以使用常规的for遍历、for of遍历和forEach遍历。

// for of 遍历

for (let item of articleList) {

	console.log(item);

}

// for 遍历

for (let i = 0; i < articleList.length; i++) {

	console.log(articleList[i]);

	console.log(articleList.item(i));

}

// forEach 遍历

articleList.forEach((item, index) => {

	console.log(item, index);

});

1、for in遍历的问题

如果使用for in遍历,则会把原型链上的一些方法也遍历出来,如entriesforEach等。

2、快照而非实时的问题

使用querySelectorAll方法获取的NodeList是快照,而非实时的数据。

请看下面这个例子:

 

// 使用 querySelectorAll 获取,articleList 是静态的,非实时的

let articleList = document.querySelectorAll(".article");

console.log(articleList);

console.log(articleList.length); // 2

setTimeout(() => {

	// 增加一个元素

	let div = document.createElement("div");

	div.className = "article";

	document.body.appendChild(div);	

	console.log(articleList);

	// 依旧为2

	console.log(articleList.length);

}, 0);

最后设置了一个定时器,往页面塞了一个classarticlediv元素,但是 articleList 的长度依旧是2。

如果是用getElementsByClassName获取,那么 articleList 就是实时的数据。

请看如下例子:

// 使用 getElementsByClassName 获取,articleList是实时的

let articleList = document.getElementsByClassName("article");

console.log(articleList);

console.log(articleList.length);



setTimeout(() => {

	// 增加一个元素

	let div = document.createElement("div");

	div.className = "article";

	document.body.appendChild(div);

	

	console.log(articleList);

	// 这里为3

	console.log(articleList.length);

}, 0);

在控制台查看打印结果:

HTMLCollection动态效果:

JavaScript选择器函数querySelector和querySelectorAll

使用 getElementsByClassName 获取的对象是 HTMLCollection 类型,会随文档流变化而变化。                  

三、小结

  • 1. querySelectorquerySelectorAll根据Css选择器获取页面元素,功能很强大。
  • 2. querySelectorAll获取的元素是快照,静态的,而非实时的,注意踩坑。

到此这篇关于 JavaScript选择器函数querySelectorquerySelectorAll的文章就介绍到这了,更多相关 JavaScript中的querySelector和querySelectorAll内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
vue组件横向树实现代码
Aug 02 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 #Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 #Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 #Javascript
利用JavaScript写一个简单计算器
JavaScript中的宏任务和微任务详情
Nov 27 #Javascript
前端监听websocket消息并实时弹出(实例代码)
Vue实现跑马灯样式文字横向滚动
Nov 23 #Vue.js
You might like
?生?D片??C字串
2006/12/06 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
短信提示使用 特效
2007/01/19 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
img标签中onerror用法
2009/08/13 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python psutil模块简单使用实例
2015/04/28 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
安全教育第一课观后感
2015/06/17 职场文书
毕业酒会致辞
2015/07/29 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang