原理:

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

源码

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

 <script type="text/javascript">
window.onload = function(){
var oUL = document.getElementById("ul1");
var oLi = getByClass(oUL,"li_box");
for(var i=0;i<oLi.length;i++){
oLi[i].style.background = "red"
}
}
</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】函数封装的更多相关文章

  1. js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  2. js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度

    摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...

  3. JS获取display为none的隐藏元素的宽度和高度的解决方案

    有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案 <h ...

  4. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  5. JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  6. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  7. JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

  8. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  9. js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  10. 元素多层嵌套,JS获取问题

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧. HTML: <!DOCTYPE html> <ht ...

随机推荐

  1. 网卡phy9161A

    硬件1. 网口网口使用4根信号线:两根发送,两根接收.一对信号线中一根承载0——+2.5V信号电压,而另一根负载的电压是0——-2.5V,因此可产生一个5Vpp的信号差.RJ45中有用的就是4根信号线 ...

  2. java后台json如何传递到jsp中解析

    需求:  系统前端jsp使用的是easyUi的datagrid展示了一些任务信息,任务信息中有个状态信息显示的值是数字, 需要根据后台保存的映射关系,将状态显示为描述信息. 原来的jsp前端显示: 解 ...

  3. LintCode - Copy List with Random Pointer

    LintCode - Copy List with Random Pointer LintCode - Copy List with Random Pointer Web Link Descripti ...

  4. linux取随机数shell版本

    #!/bin/bash aa=$(-) ..} do useradd $i echo $aa|passwd --stdin $i echo "${i} ${aa}" >> ...

  5. Maven学习日记(二)---MAVEN创建多模块的项目

    手动构建多模块maven项目,这个simple-parent项目下有两个子模块,一个是jar包型的simple-weather和一个war型的simple-webapp1.创建一个父的simple-p ...

  6. linux ad7606 驱动解读

    本文记录阅读linux ad7606驱动的笔记. 主要文件 drivers/staging/iio/adc/ad7606_spi.c drivers/staging/iio/adc/ad7606_co ...

  7. Navicat连接Oracle11g 错误的解决办法

    一.换成32位的Navicat!!! 二.去Oracle官网下载你要连接数据版本的client. 注意:需要下载两个文件,以11.2.0.4.0版本为例,需要下载 instantclient-sqlp ...

  8. (转)Invalidate、RedrawWindow与UpdateWindow的区别

     一:什么时候才会发生重绘窗口的消息? 当需要更新或重新绘制窗口的外观时,应用程序就会发送WM_PAINT消息.对窗口进行重新绘制. 二:Invalidate() -- RedrawWindow() ...

  9. CentOS下安装Filezilla软件

    说到Centos大家都是非常熟悉了,当然Filezilla也是日常中应用的软件,但是在linux下安装怎么操作呢.安装Filezilla有多个方式,但用户应该最喜欢用的就是下载安装包,然后执行安装.安 ...

  10. php一些常规动态设置与获取

    error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);ini ...