javascript高级选择器querySelector和querySelectorAll全面解析


Posted in Javascript onApril 07, 2016

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

querySelector 和 querySelectorAll 在规范中定义了如下接口:

module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。

获取页面I属性D为test的元素:

1 document.getElementById("test");
2 document.querySelector("#test");
3 document.querySelectorAll("#test")[0];

获取页面class属性为”red”的元素:

document.getElementsByClassName('red')
document.querySelector('.red')
document.querySelectorAll('.red')

ps:

 但需要注意的是返回的nodeList集合中的元素是非实时(no-live)的,想要区别什么是实时非实时的返回结果,请看下例:

<div id="container">
   <div></div>
   <div></div>
 </div>
//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));
//这个元素不但添加到页面了,这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3

通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。

Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别:

 

<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="https://3water.com/">三水点靠木</a></div> 
<pid="bar">111</p> 
<script> 
var d1 = document.getElementById('test1'), 
obj1 = d1.querySelector('div a'), 
obj2 = d1.querySelectorAll('div a'); 
obj3 = $(d1).find('div a'); 
console.log(obj1)//<a href="https://3water.com/">三水点靠木</a> 
console.log(obj2.length)//1 
console.log(obj3)//null 
</script> 
</SPAN>

 querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身

jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身

以上这篇javascript高级选择器querySelector和querySelectorAll全面解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
实例分析js事件循环机制
Dec 13 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
vue实现评价星星功能
Jun 30 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 #Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 #Javascript
原生JavaScript实现Ajax的方法
Apr 07 #Javascript
JavaScript数据推送Comet技术详解
Apr 07 #Javascript
js实现商品抛物线加入购物车特效
Nov 18 #Javascript
js类式继承与原型式继承详解
Apr 07 #Javascript
javascript原型继承工作原理和实例详解
Apr 07 #Javascript
You might like
农民C键的运用技巧
2020/03/04 星际争霸
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
HTML的select控件美化
2017/03/27 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
python pymysql库的常用操作
2020/10/16 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
2014年大学生自我评价
2014/01/19 职场文书
表彰大会主持词
2014/03/26 职场文书
庆六一活动总结
2014/08/29 职场文书
教师年度考核个人总结
2015/02/12 职场文书
十月围城观后感
2015/06/08 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android