JS-获取class类名为某个的元素-【getClass】函数封装
原理:
/*
* 根据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】函数封装的更多相关文章
- js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度
常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...
- js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度
摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...
- JS获取display为none的隐藏元素的宽度和高度的解决方案
有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案 <h ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- JS获取HTML DOM元素的8种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- 原生JS获取HTML DOM元素的8种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- JS获取HTML DOM元素的方法
JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- 元素多层嵌套,JS获取问题
如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧. HTML: <!DOCTYPE html> <ht ...
随机推荐
- gsm at 指令
一.一般命令 AT+CGMI 给出模块厂商的标识. SONY ERICSSON AT+CGMM 获得模块标识.这个命令用来得到支持的频带(GSM900,DCS1800或PCS1900).当模块有多频带 ...
- 百兆千兆网口100Base-TX/1000Base-T
100Base-TX快速以太网目前制定的三种有关传输介质的标准之一. 另外两种是100Base-T4,100Base-FX. 100标识传输速率为100Mbit/s. base标识采用基带传输. T代 ...
- 机器学习:K-Means聚类算法
本文来自同步博客. 前面几篇文章介绍了回归或分类的几个算法,它们的共同点是训练数据包含了输出结果,要求算法能够通过训练数据掌握规律,用于预测新输入数据的输出值.因此,回归算法或分类算法被称之为监督学习 ...
- Win10技巧:如何确定电脑是否适用Hyper-V虚拟机?
既然微软想要为Hyper-V的普及铺路,那么各种套路……配套措施当然也会一并跟上.比如想要看出电脑是否符合Hyper-V配置要求,有至少两种方式可以参考. 方法一:系统信息 这方法很简单,在Corta ...
- ansible 变量传递到include
Task Include Files And Encouraging Reuse 假设您想在play或playbook中重复使用任务列表. 您可以使用include文件来执行此操作. 使用includ ...
- 初学 Spring boot 报错 Whitelabel Error Page 404
按照教程,写了个最简单的 HelloWorld,尼玛报错 -->Whitelabel Error Page 404. 网上99%都是项目结构不对,说什么 Application放在父级 pack ...
- [oracle] oracle权限传递
三个用户:SYS.lisi.wangwu ① 系统权限的传递 lisi的初始化系统权限 SQL> select * from user_sys_privs; USERNAME PRIVILEGE ...
- mssql 设置id自增 设置主键
主键自增长列在进行数据插入的时候,很有用的,如可以获取返回的自增ID值,接下来将介绍SQL Server如何设置主键自增长列,感兴趣的朋友可以了解下,希望本文对你有所帮助 1.新建一数据表,里 ...
- python文件夹批处理操作
如图所示,有一个test文件夹,里面有3个子文件夹,每个子文件夹中有若干图片文件 #场景1 读取一个文件夹中所有文件,存入到一个list表中 #coding:utf-8 from __futur ...
- Unable to resolve target 'android-20'
使用eclipse编写android的app时,出现错误:Unable to resolve target 'android-20'. 参看链接: http://blog.csdn.net/u0134 ...