CSS选择器实现原理

Question

自从JQuery实现了Selector后，貌似其他一些JavaScript框架也开始向Selector靠拢，相继推出了自己的CSS选择器，考虑到css选择器确实强大，所以，在easyUI中也添加了一个自己的cssSelector方法：easyUI.cssSelector('css选择器',dom范围)CSS选择器实现原理：一、解析1、格式化数据，将css选择器转换成一种便于后面进行操作的格式，这一步很重要，这是数据结构部分，后面的实现都将以此为依据。以下面数据为例：#a b.c .d + e:first-child > f[data = "hello world!"]首先，捕获形如 [ 属性 = 值 ] 的数据，将"="两边的空格去掉，然后将“值”里的空格替换为一个不太可能会出现的临时字串，如0x20156然后，在+、：、>、[ 符号前加空格接着，将#、.、+、:、]、>后的空格去掉最好将单引号和双引号也都去掉做完上述替换操作后，变可得到形如下面的数据：#a b.c .d +e :first-child >f [data=hello0xdh20156world!]2、将格式化后的数据转换成这样的伪代码：取节点函数('css选择符',上一次操作的结果)，以空格为分隔：取节点函数('#a',上一次操作的结果)取节点函数('b.c',上一次操作的结果)取节点函数('.d',上一次操作的结果)取节点函数('+e',上一次操作的结果)取节点函数(':first-child',上一次操作的结果)取节点函数('>f',上一次操作的结果)取节点函数('[data=hello0xdh20156world!]',上一次操作的结果)3、将css选择器解析成具体的取节点函数，如：#a应当解析成：document.getElementById('a')E#a应当解析成：document.getElementsByTagName('E')，然后遍历id=a的之前进行过转换的0x20156记得重新转换为空格。 更多css Selectors的解释请参见：http://www.w3.org/TR/CSS2/selector.html
二、编写取节点函数，将伪代码实现在easyUI.cssSelector的实现中采用的是eval的方式，目前该方法尚未完全支持CSS2选择器，还在测试阶段！ 
演示：easyUI Css Selector测试地址：http://www.jslab.org.cn/?tag=cssSelector

Answer 1

啥时候IE6能完全兼容CSS2.0标准就好了，希望浏览器大一统啊。不然再好的CSS知识都是惘然，太累太辛苦。

Answer 2

谢谢 LZ写的只是最基本的一部分
我写了一个CSS3选择器JS实现 http://github.com/xfsn/lix/tree/master
W3C的CSS3选择器说明http://www.w3.org/TR/css3-selectors/

Answer 3

对了说一句 现在新出的浏览器，包括IE8都支持querySelector和querySelectorAll这两个原生的CSS选择器

Answer 4

jQuery 的 selecter 是我选择它的主要原因之一. 
另一个则是 ajax 部分.其它倒用得相当少..

Answer 5

不过说实话，从自己的实现方式来看，用selector的效率太低下了，不是项目紧张或者完全不懂JavaScript的人还是不要用它了。

Answer 6

很长时间了打不开库，还在LOADING XML，还有其它路径？
LZ的图象雷人得很呢，哈哈 ...

Answer 7

JQ的selector效率很低么?
其实JQ除了selector外,它包装的JQ对象还是很有用的.

Answer 8

jf，
使用你的那个dhATV的树，显示样式时，出了点问题，能不能帮忙看下啊：http://hi.baidu.com/sohighthesky/album/item/58f5dd3c044d67c73c6d9770.html
这是百度的图片，