js封装获取元素类名(className)的方法

最新推荐文章于 2024-06-02 20:35:38 发布

Resen4983

最新推荐文章于 2024-06-02 20:35:38 发布

阅读量9.5k

点赞数 1

文章标签：封装方法 javascript getByClass

本文链接：https://blog.csdn.net/Resen4983/article/details/70050302

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
		<ul id="list">
			<li class="on">1</li>
			<li class="select">2</li>
			<li class="on">3</li>
			<li>4</li>
			<li class="haha hehe papa">666</li>
		</ul>
		<p class="on">class为on的p标签</p>

<script type="text/javascript">
  window.οnlοad=function(){
     var len1= getByClass("on",'list');
	 //console.log(document.getElementsByTagName("*")[10].className);//测试多个className返回值类型是什么:--字符串类型;
	 //console.log(len1.length);
     // alert(len1.length);  // 结果等于2为正确
var len2= getByClass('on');
	//console.log(len2[1].innerHTML);
     //alert(len2.length);  // 结果等于3为正确
}
function getByClass(clsName, parent){
 //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素  
	var oParent=parent?document.getElementById(parent):document,
		arr=new Array(),
		cls=oParent.getElementsByTagName("*");
	for(var i=0;i<cls.length;i++){
		if(cls[i].className===clsName){/*其实用这种写法更优,应为一个元素可能有多个className,采用===判断符号无法解决这种情况,采用indexOf()可以判断出stringObject是否存在以及索引位置,如果是返回-1表示不存在.//cls[i].className.indexOf(clsName)!=-1*/
			arr.push(cls[i]);
		}
	}
	return arr;
}
</script>
</body>
</html>