日期:2014-05-17  浏览次数:20594 次

自己实现的简单的html元素选择器,类似jquery选择器,比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;
	}
}

经过在ff ie6下的测试 单纯的选择id比jquery要快很多,
其他的部分选择模式我测试的少数比jquery要快。
当然测试不可能全面,还可能会有bug,而且不支持类似于.content:first-child这样的伪类选择。
1 楼 scottcgi 2010-08-20  
哈哈,大家都喜欢和jquery比较啊。
其实吧,我觉得jquery代码结构真是乱的要死,现在好点,但让人都让的看。
估计和他的作者是前端程序员有关系吧。后台程序员代码结构好点