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;
},
