javascript深入之查找元素操作

最新推荐文章于 2024-10-07 00:04:50 发布

原创最新推荐文章于 2024-10-07 00:04:50 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

前端之Javascript 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了如何使用JavaScript获取HTML元素的类名，包括利用`getElementsByClassName`方法的使用方式及实例演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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