Jquery源码分析---构建Jquery的Dom元素
2010-09-14 13:36:44 来源:WEB开发网其实我们更细一点分析,完成可以把这个字符串拆分成两步走,第一步是根据document.getElementsByTagName(tagName)取得span的元素集,第二步是再根据其class是否等于test来进行判断,把不等于的元素从结果集中去掉。
不光是属性选择器,对所有的复合的选择器,都可以根据这种细粒度来拆分选择器,接下来就是分别是每个小部分进行操作。如果这样,我们就能把CSS selector分成两大类,第一类是是选择(selector),从根据给定的selector从Dom树找到相关的元素节点放到结果集中来。第二类是筛选(filter)。在结果集中判断该元素还满足表达式。
这样一来,就完全可以JS的原有直接或间接对Dom元素进行引用的方法,如div#id就可以变成先找到div的元素,之后就判断其元素的id是否等于id,如果不等于就从结果集中删除掉。而对于div[id=’bar’]也是一样,可以看出div#id与div[id=’id’]是一样的操作。对于div.class也可以转换到属性中去操作。
现在要做的事就分析那些基本选择器是完成选择(selector)还是筛选(filter)的工作。我们把类型选择器,Combinators统一称为元素选择器,其形式如下:*,E F,E~F,E+F,E>F,E/F,E。这些一定是从dom树中选择元素。
对于ID选择器和Class选择器,它们也可以在selector字符串的起始位置,说明他们也可以完成选择(selector)功能。当它们不在起始位置上,如div#id,div.class那他们就是筛选器。我们可以变通一下统一起来,对于ID选择器可以采用document.getElementById来直接引用。但是对于.class就不一样了,它没有相对的函数。这种情况下,我们可以把它变成*.class。*能取得一个范围内的所有的元素,然后再进行筛选。这样对于ID选择器,它有专门的函数来处理,是选择(selector)器。对Class选择器,它是筛选器,特殊情况就是对于*标签取到元素集进行筛选。
更多精彩
赞助商链接