封装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的一部分,他提供了强大的 ...
随机推荐
- Java技术——I/O知识学习
个字节,主要用在处理二进制数据,字节用来与文件打交道,所有文件的储存都是通过字节(byte)的方式,在磁盘上保留的并不是文件的字符而是先把字符编码成字节,再储存这些字节到磁盘.在读取文件(特别是文本文 ...
- 初步学习pg_control文件之六
接前文:初步学习pg_control文件之五 ,DB_IN_ARCHIVE_RECOVERY何时出现? 看代码:如果recovery.conf文件存在,则返回 InArchiveRecovery = ...
- c/c++不能返回局部对象和局部变量的指针或引用解释
在编写c/c++代码时,调用函数的书写让程序变得整洁易读,但是调用函数的返回值(局部变量的返回值,变量,结构体,数组等)也有注意事项.c/c++严禁返回局部变量的指针或引用. 其实函数的返回值的规则非 ...
- [Hbase]hbase命令行基本操作
-进入hbase shell hbase shell - 帮助help help - 查看hbase versionversion - 查看hbase 状态 status - 创建表create 't ...
- C++11中rvalue references的使用
Rvalue references are a feature of C++ that was added with the C++11 standard. The syntax of an rval ...
- AWS安装CDH5.3-CentOS6.4中关键操作步骤
1.在AWS masternode 上下载cloudera-manager-installer.bin安装包 [root@ip-172-21-42-114 ~]# wget http://archiv ...
- android开发过程中项目中遇到的坑----布点问题
我们在红点push 的到达和点击的地方,都加了布点.后来功能上了线,发现,每天的点击都比到达高! 这肯定不科学. 赶紧查问题,打开程序,发红点,关闭程序,布点上传.没问题.数据部门可以收到红点啊! 从 ...
- LINUX网络相关命令(转)
网络连通性 Ping:发送一个 ICMP 回声请求消息给主机,一直持续到到你按下 Ctrl+C .Ping 表示一个包通过 ICMP 从你的机器发送出去,然后在IP层得到回应.Ping 可以检测你与另 ...
- mysql 大数据分页查询优化
应用场景: 当有一张表的数据非常大,需要使用到分页查询,分页查询在100w条后查询效率非常低: 解决方案: 1.业务层解决:只允许用户翻页一百页以内,十条一页: 2.使用where id > 5 ...
- 虚拟现实-VR-UE4-创建一个自定义的角色 Character
我学习的资料使用的是老版本的ue4 新版本有好多都是不一样的,好多东西需要自己来摸索, 比如,在老板版本中,默认创建一个GameMode 是回自动创建构造函数发的,而新版本,是没有的,需要自己手动填写 ...