DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 原生的html元素選擇器類似jquery選擇器
原生的html元素選擇器類似jquery選擇器
編輯:關於JavaScript     

做前端,需要選擇元素,雖說有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這樣的偽類選擇。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved