原生JS实现元素的getElementsByClassName()方法,适用于多个类名

最新推荐文章于 2024-04-29 23:01:06 发布

JMission

最新推荐文章于 2024-04-29 23:01:06 发布

阅读量7.6k

点赞数 1

分类专栏： JS 文章标签： getElementsByClassNa 原生Js 用元素属性查找元素

本文链接：https://blog.csdn.net/JMission/article/details/61926457

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原生JS实现getElementsByClassName()</title>
<script>
window.onload = function() {
	var oUl = document.getElementById('ull');

	function getElementsByClassName(obj,classname){
		var result = [];
		var aEls = document.getElementsByTagName('*');
		for(var i = 0; i<aEls.length; i++){

			//查找有多个属性的元素
			var classnames = aEls[i].className.split(' ')
			if(indexOf(classname,classnames)!=-1){
				result.push(aEls[i]);
			}
		}
        return result;
	}
	function indexOf(classname,classnames){
		for(var i = 0; i<classnames.length; i++){
			if(classname==classnames[i]){
				return i;
				break;
			}
		}
		if(i = classnames.length) return -1;
	}
	//alert(indexOf('box',['box1','box']));
	alert(getElementsByClassName(oUl,'box').length);
}
</script>
</head>
<style>
li{
	width:100px;
	height:28px;
	margin-left:20px;
	list-style: none;
	background: gray;
	margin:2px;
}
.box{
	background:orange;
}
.box1{
	background:green;
}
</style>
<body>
	<ul id="ull">
		<li>0</li>
		<li class='box box'>1</li>
        <li>2</li>
        <li class='box1'>3</li>
        <li class='box1'>4</li>
        <li class='box box1'>5</li> 
	</ul>
</body>
</html>

JMission

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现元素的getElementsByClassName()方法,适用于多个类名

原生JS实现getElementsByClassName()window.onload = function() { var oUl = document.getElementById('ull'); function getElementsByClassName(obj,classname){ var result = []; var aEls = document.getEl
复制链接

扫一扫