雨夜带刀's Blog

javascript选择器的那些事儿

象 CSS 选择器那样,在 javascript 中用同样的语法来选取一个或一组 DOM 元素,这种简便的语法在目前的 javascript 选择器领域中算是事实上的标准了,jQuery 的成功也与它的选择器(sizzle)的易用是密不可分。

mobile sms spy

各大 javascript 框架和类库都有一套独自的选择器,我花了点时间自己开发了一套选择器,在性能测试方面也不输给 jQuery 的 sizzle。在 javascript 选择器的开发过程中,学到了不少东西,这些东西如果自己不去开发,估计永远也没机会学到。现在,对于 javascript 选择器的原理以及如何去实现都有了一定的了解,在这里,我觉得有必要将一些心得记录下来,并分享给有需要的人。

jQuery 在 CSS3 的选择器出来以前,就实现了很多自己私有的选择器,虽然这些私有的选择器在日常的应用中使用率都不太高,但是其作为一个类库,要适应和兼容各种场景,面对各种技术水平的web开发者,这些私有选择器还是有不小的用处,甚至可以说,CSS3 的选择器在一定程度上也吸纳了 jQuery 的私有选择器的思想,在它的基础上再做一些改良,使之成为现在的 W3C 标准

我的选择器将尽量遵循 CSS3 选择器的 W3C 标准,并适当的加入一些非标准但是比较有用的选择器,下面是支持的选择器列表:

/* 基本选择器 */
E
E#myid
E.class

/* 关系选择器 */
E > F
E + F
E ~ F

/* 属性选择器 */
E[attr]
E[attr="value"]
E[attr!="value"]    // 非标准
E[attr*="value"]
E[attr~="value"]
E[attr^="value"]
E[attr$="value"]
E[attr|="value"]

/* 伪类选择器 */
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:not(s)
E:enabled
E:disabled
E:checked
E:selected    // 非标准
E:hidden    // 非标准
E:visible    // 非标准

熟悉 jQuery 的都知道 jQuery 有很多表单选择器,如:text、:password、:radio等,这些表单选择器完全可以用属性选择器来实现,如input[type=”text”],还有 :first、:last、:even、:odd、:eq 等伪类选择器,这些选择器也完全可以用 :nth-child、:first-child 等标准的伪类选择器来取代。给用户的选择越多,也会使用户更加迷惑。从用户的角度出发,符合标准既能减少学习成本又能实现常用的功能。

标准浏览器以及IE8都有一个 querySelectorAll 的方法,该方法支持符合 W3C 标准的选择器,其中IE8只支持到 CSS2,不支持 CSS3 选择器,所以自己开发出来的选择器的主要是应用于不支持 querySelectorAll 方法的浏览器(主要就是IE6和IE7)。

基本选择器

下面是一个比较常见的选择器:

#box .list p

该选择器由3个部分组成,#box : id选择器,.list : class选择器,p : tag选择器。这算是3种最基本的选择器了,一些复杂的选择器都是从这个基础上加以演变而来。接下来对这个选择器进行分割,可以用正则或者字符串的 split 方法转换成数组,那么上面的选择器字符串将变成下面的数组形式,有了这个数组,接下来就好办了。

[ '#box', '.list', 'p' ]

选择器的查找顺序有从右到左,也有从左到右,我的选择器使用的是从左到右的查找顺序。不管是从右到左还是从左到右,只要速度够快就行,如果你觉得从右到左更有意思,更能体现技术水平,你大可以去尝试下,如果你的选择器在性能上比我的更好,那么我就服你了。这么说的原因只是觉得要实现某个功能可能有好几种方法,不管是使用哪种方法,结果的优劣才是最好的说明,当然,这不是绝对的,使用哪种方法更好也是因人而异的。

有了数组,确定了顺序,现在可以一个个查找了。从第一个 #box 开始,这个我们一看就知道是 id 选择器,但是 javascript 不能看,只能查找特征来区分,#box 的特征符号就是“#” ,以此类推 .list 的特征符号就是“.”,那么 p 的特征符号是什么呢?tag选择器没有特征符号,如果排除了 id 和 class 选择器,剩下的不就是 tag 吗?

将第一个查找到的结果作为第二个选择器的上下文(context),那么第二个选择器将在第一个选择器的上下文中查找结果,这样以此类推,直至查找到最后一个选择器,最后一个选择器的结果就是整个选择器的结果。可以用一个数组来存放查询结果,每次都读取最后一个数组元素来作为查找范围。第一个选择器如果没有指定查找范围,那么这个查找范围就默认为页面的根元素 document。最后为了便于操作,将最终的查找结果转换成真实的数组,因为查找结果可能会是 nodelist 的 array-like 的数据。

我的选择器的实现思路基本就是这样,通过上面的分析后,选择器的开发思路其实并不难,有了这个思路,其他类型的选择器同样可以效仿之。

关系选择器

关系选择器主要包含3种,当然也可以将空格的算进来,那么就是4种。

按照基本选择器的实现思路,那么关系选择器的特征符号就分别是“ ”、“>”、“+”、“~”。关系选择器就是先查找children、nextSibling元素,然后进行相应的过滤。比如 div + p,按照从左到右的顺序先查找 div 元素,然后查找 div 的 nextSibling 元素,最后再通过 p 的 tagName 来进行过滤得到结果。部分关系选择器使用从右到左的顺序可能会更快,以后做优化的时候我会尝试。

属性选择器

标准的属性选择器有7个,各框架和类库的选择器中都有一个私有的属性选择器“!=”,这个是非标准的,但是比较有用。

属性选择器的特征符号是“[”,需要注意区分的是“~=”和关系选择器的“~”。如 div[class=”test”] 可以分割成4个部分:

  • 1、tag 选择器 div
  • 2、attr (属性名) class
  • 3、过滤符号 =
  • 4、value (属性值) test

先查找到 div 元素,然后使用 getAttribute 方法来获取该元素的属性值,最后通过各种过滤方法进行过滤。需要注意的是 getAttribute 方法不能滥用,部分属性是可以直接取的,如 elm.type ,不通过 getAttribute 方法性能会有所提升。

伪类选择器

伪类选择器易于扩展,所以大部分的jQuery的私有选择器都是伪类选择器。标准的伪类选择器主要有索引伪类(也称位置伪类)、表单伪类等。伪类选择器的特征符号“:”后面可以是任意的字符串,如果想自定义某种伪类选择器会非常方便。

如何分割伪类选择器?比如 p:nth-child(enev) 可以先分割成2个部分:

  • 1、tag 选择器 p
  • 2、伪类选择器 nth-child(enev)

用中划线“-”来判断是否为索引伪类还是其他的伪类,其他伪类的实现很简单就不多说,这里简单的说下索引伪类。得到了nth-child(enev)可以继续分割:

  • 1、nth-child
  • 2、even

到这一步还可以继续分割,也可以不分割,就看你要用什么方法来处理了。标准的索引伪类选择器都有一定的规律,找准规律才好处理。nth系列的伪类比较麻烦,因为其参数的种类很多:3、3n、3n+1、3n-1、even、odd,这些参数一看就蛋痛。还是拿 p:nth-child(enev) 来说,先查找 p 元素,然后查找 p 元素的父级元素,再通过父级元素得到 firstChild,再从 firstChild 入手,遍历 nextSibling 元素同时过滤索引,对于p:nth-last-child(enev),就反过来查找,从 lastChild 入手,遍历 previousSibling 元素。

首尾索引伪类 first-child、last-child 等系列选择器,也同样可以查找 nextSibling、previousSibling 元素来进行过滤,如果是 firstChild 元素,那么其 previousSibling 元素必然为 undefined。

这些索引伪类的实现方法比较多,这只是我个人觉得速度还不至于太慢的方法,也都是简单的说说思路。

马上要过年了,在这里祝大家新年快乐!

选择器速度测试 测试说明:使用IE6/7进行测试,标准浏览器测试的是浏览器本身对querySelector方法的速度,没有意义,另jQuery、mootools、prototype都有一个实例化的过程,其他选择器引擎是直接返回了结果,直接返回结果的肯定是快些,速度测试还是有一定的片面性,我的选择器引擎是最后一个easy.js。

选择器源码阅读地址:https://github.com/chenmnkken/easyjs/blob/master/src/selector.js

原载于:雨夜带刀's Blog
本文链接:http://stylechen.com/javascript-selector.html
如需转载请以链接形式注明原载或原文地址。
zp8497586rq

“javascript选择器的那些事儿”目前已有 3 条评论

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。