原生的html元素選擇器類似jquery選擇器

2024-05-06 16:09:40

字體：大中小

供稿：網(wǎng)友

做前端，需要選擇元素，下面是實(shí)現(xiàn)代碼，一個(gè)原生的html元素選擇器類似jquery選擇器，很棒，很實(shí)用

做前端，需要選擇元素，雖說有jquery和各大js庫已經(jīng)幫我造好了輪子，但我想試試自己實(shí)現(xiàn)一個(gè)，正好項(xiàng)目也不忙，正好加入自己的js文件中，下面是實(shí)現(xiàn)代碼。用$g(“#content .op”)這種格式就可以調(diào)用，和jquery $()的參數(shù)一樣:

function $findChilds(parentNode, text)

{

//如果不傳入父節(jié)點(diǎn)的話，默認(rèn)為body

if(parentNode == undefined)

parentNode = document.body;

var childNodes = parentNode.childNodes;

var results = [];

//子節(jié)點(diǎn)大于零才循環(huán)

if(childNodes.length > 0)

{

var length = childNodes.length;

//循環(huán)查找符合text的節(jié)點(diǎn)

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);

}

//判斷完后，把當(dāng)前子元素的子元素傳入$findChilds進(jìn)行遞歸查找，返回的結(jié)果直接和現(xiàn)在的結(jié)果合并

results = results.concat($findChilds(childNodes[i], text));

}

}

return results;

}

String.prototype.vtrim = function() {

return this.replace(/^/s+|/s+$/g, '');

}

function $g(text)

{

//按照空格分割參數(shù)

var values = text.vtrim().split(" ");

var length = values.length;

//如果只有一個(gè)選擇參數(shù)的話，就直接調(diào)用dom方法返回結(jié)果。

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]);

}

//每次迭代都會(huì)產(chǎn)生許多符合參數(shù)的結(jié)果節(jié)點(diǎn),這里結(jié)果節(jié)點(diǎn)的名稱為parentNodes，第一次循環(huán)默認(rèn)為body

var parentNodes = [document.body];

//外層循環(huán)為迭代每個(gè)傳入的參數(shù)

for(var i = 0; i < length; ++i)

{

var jlength = parentNodes.length;

var results = [];

//這里如果values的長度為零的話，

//就說明是多出來的空格，

//例如:$g(" .content");這種情況不執(zhí)行代碼直接跳入下一循環(huán)

var tmpValue = values[i].vtrim();

if(tmpValue.length <= 0)

continue;

//內(nèi)層循環(huán)為迭代每個(gè)結(jié)果節(jié)點(diǎn)，

//在結(jié)果節(jié)點(diǎn)中查找符合選擇條件的結(jié)果。當(dāng)然第一次為body

for(var j=0;j<jlength;++j)

{

//$findChilds就是上邊的那個(gè)函數(shù)，就是選擇某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)的

var result = $findChilds(parentNodes[j], values[i].vtrim());

var rlength = result.length;

//因?yàn)榉祷氐挠袝r(shí)候是html容器，無法直接和數(shù)組concat所以倒入數(shù)組，這里有優(yōu)化空間，但暫不考慮性能先這么做

for (var k = 0; k < rlength; ++k)

results.push(result[k]);

}

//沒有結(jié)果，立即返回undefined

if(results == undefined || results.length <= 0)

return undefined;

//最后一次循環(huán)就直接返回結(jié)果數(shù)組，但是如果最后一個(gè)選擇條件是選擇id的話，那就不返回?cái)?shù)組直接返回dom對(duì)象了

if (i == length - 1)

{

if (values[i].substr(0, 1) == "#")

return results[0];

return results;

}

parentNodes = results;

}

}