博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS-获取class类名为某个的元素-【getClass】函数封装
阅读量:6196 次
发布时间:2019-06-21

本文共 1707 字,大约阅读时间需要 5 分钟。

原理:

/*

 * 根据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

 

 

 

函数调用

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 

 

 

解释:

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

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

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

 

 

声明:

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

  博主:xing.org1^

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

  time: 20180106 20:28:32

 

转载于:https://www.cnblogs.com/padding1015/p/6767109.html

你可能感兴趣的文章
习题集1b: 额外练习 (可选)
查看>>
JSONP的优缺点
查看>>
webpack2 热加载js 文件
查看>>
mybatis 单独使用的配置文件
查看>>
LeetCode - Refresh - Single Number
查看>>
Ajax上传文件
查看>>
Unable to connect to MKS;Too many scoket connect attempts;giving up
查看>>
算法设计 - LCS 最长公共子序列&&最长公共子串 &&LIS 最长递增子序列
查看>>
CCF NOI1020 数字识别
查看>>
Windows中使用MySQL 创建数据库(二)
查看>>
紧凑型、松散型切片互相切换
查看>>
数据结构实验七——循环队列
查看>>
6.关于js作用域链的面试题
查看>>
因为有了因为,所以有了所以
查看>>
求两个整数的最大公约数?
查看>>
webpack学习(五)—webpack+react+es6(第1篇)
查看>>
201521123009 《Java程序设计》第7周学习总结
查看>>
NSString属性什么时候用copy,什么时候用strong?
查看>>
QP移植
查看>>
unknown
查看>>