您的位置：首页 > Web前端 > JavaScript

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

2017-03-13 21:48 1011 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： getElementsByClassNa 原生Js 用元素属性查找元素

相关文章推荐

新的分享

章节导航