原生的html元素选择器类似jquery选择器
做前端，需要选择元素，虽说有jquery和各大js库已经帮我造好了轮子，但我想试试自己实现一个，正好项目也不忙，正好加入自己的js文件中，下面是实现代码。用$g(“#content.op”)这种格式就可以调用，和jquery$()的参数一样:
function$findChilds(parentNode,text)
{
//如果不传入父节点的话，默认为body
if(parentNode==undefined)
parentNode=document.body;
varchildNodes=parentNode.childNodes;
varresults=[];
//子节点大于零才循环
if(childNodes.length>0)
{
varlength=childNodes.length;
//循环查找符合text的节点
for(vari=0;i<length;++i)
{
//三种情况，className，id，tagName
switch(text.substr(0,1))
{
case'.':
//这两种:parentNode.getElementsByClassName,parentNode.all
//都是后来加上的，如果浏览器这两种方法都不支持，那就只能暴力递归了
if(parentNode.getElementsByClassName)
returnparentNode.getElementsByClassName(text.substr(1));
elseif(parentNode.all)
{
varfinded=[];
varjlength=parentNode.all.length;
for(varj=0;j<jlength;++j)
if(parentNode.all[j].className==text.substr(1))
finded.push(parentNode.all[j]);
returnfinded;
}
//以上两种方法都不支持，直接判断
if(childNodes[i].className==text.substr(1))
results.push(childNodes[i]);
break;
case'#':
return[document.getElementById(text.substr(1))];
default:
returnparentNode.getElementsByTagName(text);
}
//判断完后，把当前子元素的子元素传入$findChilds进行递归查找，返回的结果直接和现在的结果合并
results=results.concat($findChilds(childNodes[i],text));
}
}
returnresults;
}
String.prototype.vtrim=function(){
returnthis.replace(/^\s+|\s+$/g,'');
}
function$g(text)
{
//按照空格分割参数
varvalues=text.vtrim().split("");
varlength=values.length;
//如果只有一个选择参数的话，就直接调用dom方法返回结果。
if(length==1)
switch(values[0].substr(0,1))
{
case"#":
returndocument.getElementById(values[0].substr(1));
case".":
if(document.getElementsByClassName)
returndocument.getElementsByClassName(values[0].substr(1));
default:
returndocument.getElementsByTagName(values[0]);
}
//每次迭代都会产生许多符合参数的结果节点,这里结果节点的名称为parentNodes，第一次循环默认为body
varparentNodes=[document.body];
//外层循环为迭代每个传入的参数
for(vari=0;i<length;++i)
{
varjlength=parentNodes.length;
varresults=[];
//这里如果values的长度为零的话，
//就说明是多出来的空格，
//例如:$g(".content");这种情况不执行代码直接跳入下一循环
vartmpValue=values[i].vtrim();
if(tmpValue.length<=0)
continue;
//内层循环为迭代每个结果节点，
//在结果节点中查找符合选择条件的结果。当然第一次为body
for(varj=0;j<jlength;++j)
{
//$findChilds就是上边的那个函数，就是选择某个节点的子节点的
varresult=$findChilds(parentNodes[j],values[i].vtrim());
varrlength=result.length;
//因为返回的有时候是html容器，无法直接和数组concat所以倒入数组，这里有优化空间，但暂不考虑性能先这么做
for(vark=0;k<rlength;++k)
results.push(result[k]);
}
//没有结果，立即返回undefined
if(results==undefined||results.length<=0)
returnundefined;
//最后一次循环就直接返回结果数组，但是如果最后一个选择条件是选择id的话，那就不返回数组直接返回dom对象了
if(i==length-1)
{
if(values[i].substr(0,1)=="#")
returnresults[0];
returnresults;
}
parentNodes=results;
}
}
经过在ffie6下的测试单纯的选择id比jquery要快很多，
其他的部分选择模式我测试的少数比jquery要快。
当然测试不可能全面，还可能会有bug，而且不支持类似于.content:first-child这样的伪类选择。