现在的位置: 首页 > 综合 > 正文

javascript深入之查找元素操作

2013年09月15日 ⁄ 综合 ⁄ 共 1021字 ⁄ 字号 评论关闭
getElementsByClassName:
<body >
<ul> 
   <li id="a1" class="a">aa</li> 
   <li id="a2" class="a b">aa</li> 
   <li id="a3" class="aa a b">aa</li> 
</ul> 
<div class="a">afdafaf</div>
<script type="text/javascript">
var getElementsByClassName = function(className,node,tag){
	var node = node || document,
		nodes,res = [],
		match = false,
		eles,ele,classes;
	if(document.getElementsByClassName){
		nodes= node.getElementsByClassName(className);
		if(typeof tag !== "undefined"){
			for(var i=0,len=nodes.length; i<len;i++){
				var node = nodes[i];
				if(tag !== "*" && node.tagName === tag.toUpperCase()){
					res.push(node);
				}
			}
		}else{
			res=nodes;
		}
	}else{
		tag = tag || "*";
		classes = className.split(" ");
		eles = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag);
		match = false;
		//循环比较
		//for(var i=eles.length; i>0; i--){
		for (var i=0,elen=eles.length; i<elen; i++){
			var ele = eles[i];
			for(var k=0,klen=classes.length; k<klen; k++){
				match =new RegExp("(^|\\s)" + classes[k] + "(\\s|$)").test((ele.className).replace(/(^\s+)|(\s+$)/,""));
				if(!match) break;
			}
			if(match) res.push(ele);
		}
	}
	return res;
}
//实例:
alert(getElementsByClassName("a",document,"li").length);

【上篇】
【下篇】

抱歉!评论已关闭.