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 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
总结js函数相关知识点
Feb 27 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
JavaScript 对象创建的3种方法
Nov 17 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
PHP简单实现文本计数器的方法
2016/04/28 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
python中的五种异常处理机制介绍
2014/09/02 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
RealTek面试题
2016/06/28 面试题
整改落实自查报告
2014/11/05 职场文书
清洁工个人工作总结
2015/03/05 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers