原生的强大DOM选择器querySelector介绍


Posted in Javascript onDecember 21, 2016

在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库。事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,querySelector 和 querySelectorAll 作为查找 DOM 的又一途径,极大地方便了开发者,使用它们,你可以像使用 CSS 选择器一样快速地查找到你需要的节点。

querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,你也许会像下面这样:

document.getElementById("test");
现在我们来试试使用新方法来获取这个 DIV:

document.querySelector("#test");
document.querySelectorAll("#test")[0];

下面是个小演示:

我是 id 为 test 的 div

感觉区别不大是吧,但如果是稍微复杂点的情况,原始的方法将变得非常麻烦,这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子,我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素,当然这很拗口,但是用本文的新方法来选择这个元素,比用言语来描述它还要简单。

document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];

下面是个小演示:

我是层里的 p 标签

现在应该对于 querySelector、querySelectorAll 方法中的参数已经非常明白了,是的,它接收的参数和 CSS 选择器完全一致。querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素,而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素,如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组,如果没有匹配的元素则返回的数组为空。在本文最后一个例子中,我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。

var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
  emphasisText[i].style.fontWeight = "bold";
}

这是原生方法,比起jquery速度快,缺点是IE6、7不支持。

W3C的规范与库中的实现

querySelector:return the first matching Element node within the node's subtrees. If there is no such node, the method must return null .(返回指定元素节点的子树中匹配selector的集合中的第一个,如果没有匹配,返回null)

querySelectorAll:return a NodeList containing all of the matching Element nodes within the node's subtrees, in document order. If there are no such nodes, the method must return an empty NodeList. (返回指定元素节点的子树中匹配selector的节点集合,采用的是深度优先预查找;如果没有匹配的,这个方法返回空集合)

这在BaseElement 为document的时候,没有什么问题,各浏览器的实现基本一致;但是,当BaseElement 为一个普通的dom Node的时候(支持这两个方法的dom Node ),浏览器的实现就有点奇怪了,举个例子:

<div class= "test"  id= "testId" > 
   <p><span>Test</span></p> 
</div> 
<script type= "text/javascript" >   
   var  testElement= document.getElementById( 'testId' ); 
   var  element = testElement.querySelector( '.test span' ); 
   var  elementList = document.querySelectorAll( '.test span' ); 
   console.log(element); // <span>Test</span>
   console.log(elementList); // 1  
</script>

按照W3C的来理解,这个例子应该返回:element:null;elementList:[];因为作为baseElement的 testElement里面根本没有符合selectors的匹配子节点;但浏览器却好像无视了baseElement,只在乎selectors,也就是说此时baseElement近乎document;这和我们的预期结果不合,也许随着浏览器的不断升级,这个问题会得到统一口径!

人的智慧总是无穷的,Andrew Dupont发明了一种方法暂时修正了这个怪问题,就是在selectors前面指定baseElement的id,限制匹配的范围;这个方法被广泛的应用在各大流行框架中;

Jquery的实现:

var  oldContext = context,
old = context.getAttribute( "id"  ),
nid = old || id,
try  {
	if  ( !relativeHierarchySelector || hasParent ) {
   	return  makeArray( context.querySelectorAll( "[id='"  + nid + "'] "  + query ), extra );
 	}  
} 
catch (pseudoError) {} 
finally {
	if  ( !old ) {
	 	oldContext.removeAttribute( "id"  );
	}
}

先不看这点代码中其他的地方,只看他如何实现这个方法的;这点代码是JQuery1.6的片段;当baseElement没有ID的时候,给他设置一个id = "__sizzle__”,然后再使用的时候加在selectors的前面,做到范围限制;context.querySelectorAll( "[id='" + nid + "'] " + query ;最后,因为这个ID本身不是baseElement应该有的,所以,还需要移除:oldContext.removeAttribute( "id" ); ,Mootools的实现:

var  currentId = _context.getAttribute( 'id' ), slickid = 'slickid__' ;
_context.setAttribute( 'id' , slickid);
_expression = '#'  + slickid + ' '  + _expression;
context = _context.parentNode;

Mootools和Jquery类似:只不过slickid = 'slickid__';其实意义是一样的;方法兼容性:FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;IE 8 :不支持baseElement为object;

Javascript 相关文章推荐
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 #Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 #Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 #Javascript
详解jQuery选择器
Dec 21 #Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 #Javascript
js实现可输入可选择的select下拉框
Dec 21 #Javascript
详解handlebars+require基本使用方法
Dec 21 #Javascript
You might like
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Python连接mysql数据库的正确姿势
2016/02/03 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
电子专业毕业生自我鉴定
2014/01/22 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
机房搬迁方案
2014/05/01 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
购房协议书范本
2014/10/02 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers