querySelector()与querySelectorAll()的区别
来源:互联网 发布:游戏端口被限怎么解块 编辑:程序博客网 时间:2024/06/11 17:10
本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/53414993,未经博主允许不得转载。
之前,在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:JS2:
可以看到,JS1输出的NodeList对象的长度为2,包含了类选择器.className1
匹配的所有Element对象,而JS2输出的NodeList对象的长度为1,只包含了Element元素的后代匹配该类选择器的Element对象,说明:当用Element类型调用querySelectorAll()
方法时,只会在这个元素的后代中去查找匹配的Element对象。若不存在匹配的对象,则这Document和Element这两种类型调用该方法时,均返回一个空的NodeList对象。
- querySelector()与querySelectorAll()的区别
- querySelector和querySelectorAll区别
- html querySelector与querySelectorAll
- javascript的querySelectorAll()和querySelector()
- querySelector(),querySelectorAll()
- querySelectorAll 与 getElementsBy 的区别
- 再谈querySelector和querySelectorAll
- querySelector querySelectorAll 记录
- querySelector和querySelectorAll
- querySelector()和querySelectorAll()
- 【HTML5与CSS3基础】选择器querySelector和querySelectorAll
- HTML5中DOM元素的querySelector/querySelectorAll的工作机制
- document自带的强大的选择器querySelector/querySelectorAll
- querySelector与getElementBy等的区别
- 各浏览器中querySelector和querySelectorAll的实现差异
- 强大的原生DOM选择器querySelector和querySelectorAll
- 强大的原生DOM选择器querySelector和querySelectorAll
- js--打卡--DOM的querySelector和querySelectorAll方法
- Oracle-Alert log解读
- 文章标题
- 快速排序(QuickSort)_C语言版
- 编译vlc-android(build vlc-android on ubuntu)
- 关于jsp的三大指令、七大动作、九大对象
- querySelector()与querySelectorAll()的区别
- 4 gradle task依赖
- 在matlab基础上简单实现一个神经网络算法
- JNI 实战全面解析
- JAVA中接口和抽象类的区别
- android数据库框架SugarORM的简单使用
- 删除字符串中指定的字符串
- 小蜗牛,慢慢爬
- 指针实现字符串复制