封装getByClass(JS获取class的方法封装为一个函数)
获取方法一(普通版) 获取单一的class:
function getByClass(oParent, sClass) {//两个形参,第一个对象oParent 第二个样式名class
var aEle = oParent.getElementsByTagName("*");//从对象里选择所有元素
var aResult = [];//存放匹配出来结果的数组
for (var i = 0; i < aEle.length; i++) {//遍历所有oParent元素里面的所有元素
if (aEle[i].className == sClass) {//如果选出了的第i个元素等于传进来的参数的类名
aResult.push(aEle[i]);//就把结果添加到数组里面
}
}
return aResult; //返回数组
}
获取方法二(完美版)
1、多个class获取—>正则表达式:
function getByClass(oParent, sClass) {
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
var re = new RegExp('\\b' + sClass + '\\b', 'i');//正则表达式,\b是单词分界处, for ( var i = 0; i < aEle.length; i++) {
if (re.test(aEle[i].className)) {//test方法返回Boolean的值
aResult.push(aEle[i]);
}
} return aResult;
}
2、 多个class获取—>数组:
function getByClass(oParent, sClass) {
var aResult = [];
var aEle = oParent.getElementsByTagName('*');
for (var i = 0; i < aEle.length; i++) {
var arr = aEle[i].className.split(/\s+/);
for (var j = 0; j < arr.length; j++) {
if (arr[j] == sClass) {
aResult.push(aEle[i])
}
}
}
return aResult;
};
获取方法三(复杂版):
function getClass(classname, obj) {//obj就是找的标签范围;
var obj = obj || document;//如果obj没有参数传进来的话就为假,就返回document;
var arr = [];//设置一个数组来存储在ie下标签的className属性值等于类名的元素;
if (document.getElementsByClassName) {//如果条件为真,就代表浏览器为火狐;
return document.getElementsByClassName(classname)//火狐下面直接返回结果;
} else {//不是火狐
var alls = document.getElementsByTagName("*");//首先找到页面所有的标签;
for (var i = 0; i < alls.length; i++) {
if (checkclass(alls[i].className, classname)) {//1.1.回调函数判断类名,因为同一标签可能有多个类名;
arr.push(alls[i])//1.3.如果是真的,就把这个元素推进数组里面;
}
}
return arr;
}
}
function checkclass(startclass, endclass) {//判断类名
var arr = startclass.split(" ");//多个类名用空格分隔成不同元素的数组;
for (var i = 0; i < arr.length; i++) {
if (arr[i] == endclass) {//1.2.被分割的数组元素里面如果有一个等于classname就返回真;
return true;
}
}
return false;
}
封装getByClass(JS获取class的方法封装为一个函数)的更多相关文章
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- js获取域名的方法
本文实例讲述了js获取域名的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <script>//获取域名var k_host = window.location.hos ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- 【功能代码】---4用JS获取地址栏参数方法
用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...
- 使用JS获取当前地理位置方法汇总
使用JS获取当前地理位置方法汇总 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2014-12-18我要评论 这篇文章主要介绍了使用JS获取当前地理位置方法汇总,需要的朋友可以参考下 ...
- 【JS】---4用JS获取地址栏参数方法
用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...
- js 检查登录态方法封装(闭包、状态缓存)
前端页面开发时,经常需要异步校验登录态,每次都重新copy之前写的方法,比较繁琐不好维护,固将登录态校验封装成一个js. (function(){ //登录状态 1 登录态有效 2 登录态无效 3 请 ...
- iOS OC和JS的交互 javaScriptCore方法封装
一.javaScriptCore javaScriptCore是一种JavaScript引擎,主要为webKit提供脚本处理能力,javaScriptCore是开源webkit的一部分,他提供了强大的 ...
随机推荐
- fsync体会
看这个链接:http://www.postgresql.org/docs/9.1/static/runtime-config-wal.html 是这样说的: fsync (boolean) If th ...
- 5-sql语句
1 [oracle@ocp ~]$ . oraenv # ORACLE_SID = [oracle] ? orcl The Oracle base has been set to /u01/app/o ...
- 响应式js设置
<script> (function anonymous() { // 声明一个函数,并直接的执行 function computed() { let HTML = document.do ...
- javascript数据相关处理,序列化反序列化,数据编码与解码
对象序列化简而言之,将对象转为字符串.在数据的传输过程中,经常会使用到对象序列化. javascript中常用的对象序列化:JSON.stringify(); javascript中常用的对象反序列化 ...
- iOS-读写plist文件
读写plist文件 问题,我有一个plist文件,表示56个民族的,但是里面保存的字典,我想转换成一个数组 好的,那么就先遍历这个plist,然后将结果保存到一个数组中,这里出现的一个问题就是C语言字 ...
- 【廖雪峰老师python教程】——filter/sorted
filter Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次作用于每个元素,然 ...
- webpack配置别名alias
在webpack.config.js中,通过设置resolve属性可以配置查找“commonJS/AMD模块”的基路径,也可以设置搜索的模块后缀名,还可以设置别名alias.设置别名可以让后续引用的地 ...
- Jmeter使用时异常问题解决
1.执行jmeter请求时,响应数据中出现乱码异常(如图) 解决方案: 打开E:\apache-jmeter-4\bin\jmeter.properries(jmeter安装目录),查找到语句行:#s ...
- CodeForces-1132C Painting the Fence
题目链接 https://vjudge.net/problem/CodeForces-1132C 题面 Description You have a long fence which consists ...
- kill命令详解
基础命令学习目录首页 原文链接:https://www.cnblogs.com/wangcp-2014/p/5146343.html 1.命令格式: kill[参数][进程号] 2.命令功能: 发送指 ...