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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
es6函数之rest参数用法实例分析
Apr 18 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
MVC模式的PHP实现
2006/10/09 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP 时间日期操作实战
2011/08/26 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
jQuery实现文件上传进度条特效
2015/08/12 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Python写的服务监控程序实例
2015/01/31 Python
浅谈Python中的私有变量
2018/02/28 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python对切片命名的实现方法
2018/10/16 Python
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
临床医师个人自我评价
2014/04/06 职场文书
心理健康活动总结
2014/04/30 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
行为规范主题班会
2015/08/13 职场文书