javaScript中的querySelector()与querySelectorAll()的区别
2024-10-19 15:39:26
之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素。它的核心思想便是利用querySelector()
或querySelectorAll()
方法,进而对文档元素进行获取操作,而这两种方法之间的区别,正是本文要讲述的内容。
querySelector()
。Document、Element类型均可调用该方法。HTML:
<div id="item" class="className1">
<div class="className1">
</div>
<div class="className2">
</div>
</div>JS1(Document类型调用该方法):
console.log(document.querySelector('.className1')); 输出结果:
<div class="className1">
<div class="className1">
</div>
<div class="className2">
</div>
</div>JS2(Element类型调用该方法):
var elementType = document.getElementById('item'); //得到Element对象
console.log(elementType.querySelector('.className1')); 输出结果:
<div class="className1">
</div>可以看到,当用Document类型调用
querySelector()
方法时,会在文档元素范围内查找匹配的元素;而当用Element类型调用querySelector()
方法时,只会在这个元素的后代元素中去查找匹配的元素。若不存在匹配的元素,则这两种类型调用该方法时,均返回null。querySelectorAll()
。Document、DocumentFragment、Element类型均可调用该方法。HTML:
<div id="item" class="className1">
<div class="className1">
</div>
<div class="className2">
</div>
</div>JS1(Document类型调用该方法):
console.log(document.querySelectorAll('.className1')); 输出结果:
非实时NodeList对象JS2(Element类型调用该方法):
var elementType = document.getElementById('item'); //得到Element对象
console.log(elementType.querySelectorAll('.className1')); 输出结果:
非实时NodeList对象querySelectorAll()
方法返回的非实时NodeList对象如下图:
JS1:可以看到,JS1输出的NodeList对象的长度为2,包含了类选择器
.className1
匹配的所有Element对象,而JS2输出的NodeList对象的长度为1,只包含了Element元素的后代匹配该类选择器的Element对象,说明:当用Element类型调用querySelectorAll()
方法时,只会在这个元素的后代中去查找匹配的Element对象。若不存在匹配的对象,则这Document和Element这两种类型调用该方法时,均返回一个空的NodeList对象。
最新文章
- SQL Server下载安装
- 获取字符串中img标签的url集合(转载)
- Atitit &#160;&#160;发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化
- git学习——<;一>;git安装
- SVN安装与使用
- [bzoj 2159]Crash的文明世界
- PC-XP系统忘记密码怎么办
- oracle进制转换
- Period(kmp)
- layerX offsetX pageX
- [LeetCode] Implement Magic Dictionary 实现神奇字典
- Emacs中的代码折叠控制
- 【比赛】NOIP2018 货币系统
- Java高并发秒杀API之Service层
- mysqldb mysql_config
- php调用python脚本
- Notes of Daily Scrum Meeting(11.5)
- PAT 1151 LCA in a Binary Tree[难][二叉树]
- UIBezierPath的使用方法
- 基于Shiro,JWT实现微信小程序登录完整例子