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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
angular实现form验证实例代码
Jan 17 Javascript
vue模板语法-插值详解
Mar 06 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
微信小程序实现图片预览功能
Jan 31 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 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网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
DOM 高级编程
2015/05/06 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python更新所有已安装包的操作
2020/02/13 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
numpy实现RNN原理实现
2021/03/02 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
杭州-DOTNET笔试题集
2013/09/25 面试题
学生档案自我鉴定
2013/10/07 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
五年级语文教学反思
2014/01/30 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
css3 文字断裂效果
2022/04/22 HTML / CSS