原生的html元素选择器类似jquery选择器

2024-05-06 16:09:40

字体：大中小

来源：转载

供稿：网友

做前端，需要选择元素，下面是实现代码，一个原生的html元素选择器类似jquery选择器，很棒，很实用

做前端，需要选择元素，虽说有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;

}

}