Prototype Selector对象学习
2024-05-06 14:14:37
供稿：网友
代码如下:
function $$() {
return Selector.findChildElements(document, $A(arguments));
}
这个类可以分成三个部分:第一个部分就是根据不同的浏览器，判断使用什么DOM操作方法。其中操作IE就是用普通的getElementBy* 系列方法；FF是document.evaluate；Opera和Safari是selectorsAPI。第二部分是对外提供的基本函数，像findElements，match等，Element对象里面的很多方法就是直接调用这个对象里面的方法。第三部分就是XPath等一些查询DOM的匹配标准，比如什么的字符串代表的意思是查找first-child，什么的字符串代表的是查询nth-child。
由于这个对象里面的方法很多，就不给出所有的源码了，其实我自己也仅仅看懂了一些方法的代码而已。这里根据浏览器的不同用一个简单的例子走一遍进行DOM选择的流程。在这个过程中给出需要的源代码，并加以说明。
具体的例子如下：
代码如下:
<div id="parent2">
<div id="navbar">
<a id="n1"></a>
<a></a>
</div>
<div id="sidebar">
<a id="s1"></a>
<a></a>
</div>
</div>
<script type="text/javascript"><!--
$$('#navbar a', '#sidebar a')
// --></script>
下面以FF为例进行说明，流程如下：
代码如下:
/*先找到$$方法，上面已经给出了，在这个方法里面将调用Selector的findChildElements方法，并且第一个参数为document，剩下参数为DOM查询字符串的数组*/
findChildElements: function(element, expressions) {
//这里先调用split处理了一下字符串数组，判断是否合法，并且删除了空格
expressions = Selector.split(expressions.join(','));
//handlers里面包含了对DOM节点处理的一些方法，像concat，unique等
var results = [], h = Selector.handlers;
//逐个处理查询表达式
for (var i = 0, l = expressions.length, selector; i < l; i++) {
//新建Selector
selector = new Selector(expressions[i].strip());
//把查询到的节点连接到results里面
h.concat(results, selector.findElements(element));
}
//如果找到的节点数大于一，把重复节点过滤掉
return (l > 1) ? h.unique(results) : results;
}
//===================================================
//Selector.split方法:
split: function(expression) {
var expressions = [];
expression.scan(/(([/w#:.~>+()/s-]+|/*|/[.*?/])+)/s*(,|$)/, function(m) {
//alert(m[1]);
expressions.push(m[1].strip());
});
return expressions;
}
//===================================================
//Selector.handlers对象
handlers: {
concat: function(a, b) {
for (var i = 0, node; node = b[i]; i++)
a.push(node);
return a;
},
