findElements: function(root) {
//判断root是否null，为null则设置成document
root = root || document;
var e = this.expression, results;
//判断是用哪种模式操作DOM，在FF下是xpath
switch (this.mode) {
case 'selectorsAPI':
if (root !== document) {
var oldId = root.id, id = $(root).identify();
id = id.replace(/[\.:]/g, "\\$0");
e = "#" + id + " " + e;
}
results = $A(root.querySelectorAll(e)).map(Element.extend);
root.id = oldId;
return results;
case 'xpath':
//下面看一下_getElementsByXPath方法
return document._getElementsByXPath(this.xpath, root);
default:
return this.matcher(root);
}
},
//===========================================
//这个方法其实就是把查找到的节点放到results里，并且返回，这里用到了document.evaluate，下面给出了这个方法详细解释的网址
if (Prototype.BrowserFeatures.XPath) {
document._getElementsByXPath = function(expression, parentElement) {
var results = [];
var query = document.evaluate(expression, $(parentElement) || document,
null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0, length = query.snapshotLength; i < length; i++)
results.push(Element.extend(query.snapshotItem(i)));
return results;
};
}
/*
下面这个网址是document.evaluate的方法解释:https://developer.mozilla.org/cn/DOM/document.evaluate
*/
下面使用给出的例子连续起来解释一下：
首先$$里面调用findChildElements方法，expressions被设置为['#navbar a','#siderbar a']
下面调用：selector = new Selector(expressions[i].strip());新建一个Selector对象，调用initialize方法，也就是判断用什么DOM API，由于是FF，所以是this.shouldUseXPath()，然后调用compileXPathMatcher()
然后compileXPathMatcher()里面的 var e = this.expression，把e设置成'#navbar a'，然后进入while循环，遍历patterns，检查查询字符串的匹配模式，这里根据pattern的正则表达式，找到{ name: 'id', re: /^#([\w\-\*]+)(\b|$)/ },，所以name为id，当m = e.match(ps[i].re)匹配之后，m被设置成一个数组，其中m[0]就是整个匹配的字符串'#navbar'，m[1]就是匹配的第一个分组字符串'navbar'
接下来判断Object.isFunction(x[name])，由于id对应的是字符串，所以执行new Template(x[name]).evaluate(m))，字符串：id: "[@id='#{1}']",中的#{1}被替换成m[1]，即'navbar'，最后把结果放到this.matcher中
然后通过把第一个匹配的字符串删除，e变成了' a'，这里有一个空格！接下来继续进行匹配
这次匹配到的是：{ name: 'descendant', re: /^\s/ }，然后找到xpath中对应的descendant项：descendant: "//*",然后把这个字符串放到this.matcher中，去掉空格e只剩下字符'a'了，继续匹配
这词匹配到的是：{ name: 'tagName', re: /^\s*(\*|[\w\-]+)(\b|$)?/ },然后找到tagName对应的xpath项，
tagName: function(m) {
if (m[1] == '*') return '';
return "[local-name()='" + m[1].toLowerCase() +
"' or local-name()='" + m[1].toUpperCase() + "']";
}
是个方法，所以会调用x[name](m)，而m[1]='a'，返回下面的那串字符，然后在放到this.matcher里，这次e为空串，while的第一个条件不满足，退出循环，把this.matcher数组连接成一个xpath字符串： .//*[@id='navbar']//*[local-name()='a' or local-name()='A']
在初始化完Selector后，执行Selector的实例方法findElements，这里直接调用：document._getElementsByXPath(this.xpath, root);
在_getElementsByXPath方法里执行真正的DOM查询方法document.evaluate，最后返回结果
以上就是整个查询DOM在FF下的流程！
在IE下和Opera，safari下流程是一样的，只不过执行的具体方法略有不同，有兴趣可以自己研究研究，那些复杂的DOM选择操作就不举例子了。这里构造的流程是非常值得学习的，包括通过pattern模式匹配进行xpath的生成，把那些patterns，xpath等提出来。
可以看出来，写一个兼容所有浏览器的框架真是不容易！学习学习！