JS-获取class类名为某个的元素-【getClass】函数封装

原理：

/*
 * 根据class获取元素.
 * 原理是，取出oparent下的所有元素，组成数组，然后遍历类名，全等判断。
*/

源码

 

1 1 function getClass(oParent,clsName){ 2 　　 var oParent = document.getElementById(oParent); 3 2 var boxArr = new Array(); 4 3 oElements = oParent.getElementsByTagName('*'); 5 4 for(var i=0;i<oElements.length;i++){ 6 5 if(oElements[i].className == clsName){ 7 6 boxArr.push(oElements[i]); 8 7 } 9 8 } 10 9 return boxArr; 11 10 }

 

 

 

函数调用

getClass(oParent,clsName);

代码解释：

function getClass(oParent,clsName){
    var boxArr = new Array();
    //boxArr 用来存储获取到的所有class为clsName的元素
    
    oElements  = oParent.getElementsByTagName('*');
    //oElements 获得的是父元素下的所有元素，是一个集合
    
    for(var i=0;i<oElements.length;i++){
        //循环遍历获取到的oElements数组
        
        if(oElements[i].className == clsName){
            //判断数组中，元素的类名如果和传过来的想要获取的类名一致的话
            
            boxArr.push(oElements[i]);
            //利用数组的push功能把对应的元素装进去
        }
    }
    return boxArr;
    //弹出最后的结果
}

________________________________________________________________________________________________________2017-05-21  18:35:10

丰富一下另一端js

 

1 <script type="text/javascript"> 2 window.onload = function(){ 3 var oUL = document.getElementById("ul1"); 4 var oLi = getByClass(oUL,"li_box"); 5 for(var i=0;i<oLi.length;i++){ 6 oLi[i].style.background = "red" 7 } 8 } 9 </script>

 

 

解释：

var oUL = document.getElementById("ul1");

//获取到需要的找class的父元素

var oLi = getByClass(oUL,"li_box");

//让子元素们等于函数返回来的那个数组。其实直接用getElementsByTagName获取到的也是一个元素集合。现在直接等于一个数组，能用的方法和属性则更多了呢！顺便调用函数并传参。参数是父元素的变量和需要找的类名。

for(var i=0;i<oLi.length;i++){

//循环弹出来的数组，也就是所有类名为“li_box”的li

//接下来直接做你想让那些带你需要类名的元素该做的事。
比如：oLi[i].style.background = "red"

 

 

 

——————————————————————————————————————2018年修复bug—————————————————————————————————————

function getClass(oParent,clsName) {var oParents = document.getElementById(oParent);var boxArr = new Array();var oElements = oParents.getElementsByTagName('*');for(let i=0;i<oElements.length;i++){var classNameArr = oElements[i].className.split(/\s+/);for (let j = 0; j < classNameArr.length; j++) {if(classNameArr[j] === clsName){boxArr.push(oElements[i]);}}}console.log(boxArr)return boxArr;} getClass('搜索范围外框的idName','要搜索的className');

这种写法主要是针对，如果你要搜索拥有该className的元素上边，还有别的className，那么之前的程序是做不到的，所以用split把元素上的类名切开来，再进行对比。

这里，在boxArr.push那里，原来想错了，写的classNameArr[j]，后来发现，boxArr最后是一个字符串数组，并不是元素数组，所以改成oElements[i]就可以了。

 

 

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/

　　time： 20180106 20:28:32

 

总结

以上是生活随笔为你收集整理的JS-获取class类名为某个的元素-【getClass】函数封装的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。