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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 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
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
如何用itertools解决无序排列组合的问题
2017/05/18 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
python中def是做什么的
2020/06/10 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
在购买印度民族服饰:Soch
2020/09/15 全球购物
市场营销专业推荐信
2013/11/03 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
党员创先争优活动总结
2014/05/04 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
学习教师法的心得体会
2014/09/03 职场文书
党支部三会一课计划
2014/09/24 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android