原生的强大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 相关文章推荐
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
js中如何完美的解析数据
Mar 18 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
react antd实现动态增减表单
Jun 03 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函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
js实现导航跟随效果
2018/11/17 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
简单解析Django框架中的表单验证
2015/07/17 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python requests.post带head和body的实例
2019/01/02 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Python3监控疫情的完整代码
2020/02/20 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
PyTorch-GPU加速实例
2020/06/23 Python
python中selenium库的基本使用详解
2020/07/31 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
学生实习证明范文
2014/09/28 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
唐山大地震的观后感
2015/06/05 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS