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文本框高亮显示插件代码
Apr 02 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
关于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
生成sessionid和随机密码的例子
2006/10/09 PHP
php 文件上传系统手记
2009/10/26 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
华润集团网上药店:健一网
2016/09/19 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
幼儿园中班上学期评语
2014/04/18 职场文书
酒店管理求职信
2014/06/09 职场文书
客房领班岗位职责
2015/02/11 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
导游词之吉林花园山
2019/10/17 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
MySQL优化及索引解析
2022/03/17 MySQL
python中 .npy文件的读写操作实例
2022/04/14 Python