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

来源:互联网 发布:混凝土压力泌水率数据 编辑:程序博客网 时间:2024/05/16 14:12
<!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>

0 0