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

zp8497586rq