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 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
JQuery live函数
Dec 24 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
关于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
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
PHP学习记录之数组函数
2018/06/01 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
python实现自动网页截图并裁剪图片
2018/07/30 Python
Windows下安装Scrapy
2018/10/17 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python eventlet绿化和patch原理
2020/11/21 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
Ruby如何定义一个类
2012/10/08 面试题
高三体育教学反思
2014/01/29 职场文书
消防验收申请报告
2015/05/15 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书