做前端，需要選擇元素，雖說有jquery和各大js庫已經幫我造好了輪子，但我想試試自己實現一個，正好項目也不忙，正好加入自己的js文件中，下面是實現代碼。用$g(“#content .op”)這種格式就可以調用，和jquery $()的參數一樣:
function $findChilds(parentNode, text)
{
//如果不傳入父節點的話，默認為body
if(parentNode == undefined)
parentNode = document.body;
var childNodes = parentNode.childNodes;
var results = [];
//子節點大於零才循環
if(childNodes.length > 0)
{
var length = childNodes.length;
//循環查找符合text的節點
for(var i=0;i<length;++i)
{
//三種情況，className，id， tagName
switch(text.substr(0, 1))
{
case '.':
//這兩種:parentNode.getElementsByClassName,parentNode.all
//都是後來加上的，如果浏覽器這兩種方法都不支持，那就只能暴力遞歸了
if(parentNode.getElementsByClassName)
return parentNode.getElementsByClassName(text.substr(1));
else if(parentNode.all)
{
var finded = [];
var jlength = parentNode.all.length;
for(var j=0;j<jlength;++j)
if(parentNode.all[j].className == text.substr(1))
finded.push(parentNode.all[j]);
return finded;
}
//以上兩種方法都不支持，直接判斷
if(childNodes[i].className == text.substr(1))
results.push(childNodes[i]);
break;
case '#':
return [document.getElementById(text.substr(1))];
default:
return parentNode.getElementsByTagName(text);
}
//判斷完後，把當前子元素的子元素傳入$findChilds進行遞歸查找，返回的結果直接和現在的結果合並
results = results.concat($findChilds(childNodes[i], text));
}
}
return results;
}
String.prototype.vtrim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
function $g(text)
{
//按照空格分割參數
var values = text.vtrim().split(" ");
var length = values.length;
//如果只有一個選擇參數的話，就直接調用dom方法返回結果。
if(length == 1)
switch(values[0].substr(0, 1))
{
case "#":
return document.getElementById(values[0].substr(1));
case ".":
if(document.getElementsByClassName)
return document.getElementsByClassName(values[0].substr(1));
default:
return document.getElementsByTagName(values[0]);
}
//每次迭代都會產生許多符合參數的結果節點,這裡結果節點的名稱為parentNodes，第一次循環默認為body
var parentNodes = [document.body];
//外層循環為迭代每個傳入的參數
for(var i = 0; i < length; ++i)
{
var jlength = parentNodes.length;
var results = [];
//這裡如果values的長度為零的話，
//就說明是多出來的空格，
//例如:$g(" .content");這種情況不執行代碼直接跳入下一循環
var tmpValue = values[i].vtrim();
if(tmpValue.length <= 0)
continue;
//內層循環為迭代每個結果節點，
//在結果節點中查找符合選擇條件的結果。當然第一次為body
for(var j=0;j<jlength;++j)
{
//$findChilds就是上邊的那個函數，就是選擇某個節點的子節點的
var result = $findChilds(parentNodes[j], values[i].vtrim());
var rlength = result.length;
//因為返回的有時候是html容器，無法直接和數組concat所以倒入數組，這裡有優化空間，但暫不考慮性能先這麼做
for (var k = 0; k < rlength; ++k)
results.push(result[k]);
}
//沒有結果，立即返回undefined
if(results == undefined || results.length <= 0)
return undefined;
//最後一次循環就直接返回結果數組，但是如果最後一個選擇條件是選擇id的話，那就不返回數組直接返回dom對象了
if (i == length - 1)
{
if (values[i].substr(0, 1) == "#")
return results[0];
return results;
}
parentNodes = results;
}
}
經過在ff ie6下的測試 單純的選擇id比jquery要快很多，
其他的部分選擇模式我測試的少數比jquery要快。
當然測試不可能全面，還可能會有bug，而且不支持類似於.content:first-child這樣的偽類選擇。