获取方法一(普通版) 获取单一的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的方法封装为一个函数)的更多相关文章

  1. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  2. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  3. js获取域名的方法

    本文实例讲述了js获取域名的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <script>//获取域名var k_host = window.location.hos ...

  4. JS1 js获取dom元素方法

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

  5. 【功能代码】---4用JS获取地址栏参数方法

    用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  6. 使用JS获取当前地理位置方法汇总

    使用JS获取当前地理位置方法汇总 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2014-12-18我要评论 这篇文章主要介绍了使用JS获取当前地理位置方法汇总,需要的朋友可以参考下 ...

  7. 【JS】---4用JS获取地址栏参数方法

    用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  8. js 检查登录态方法封装(闭包、状态缓存)

    前端页面开发时,经常需要异步校验登录态,每次都重新copy之前写的方法,比较繁琐不好维护,固将登录态校验封装成一个js. (function(){ //登录状态 1 登录态有效 2 登录态无效 3 请 ...

  9. iOS OC和JS的交互 javaScriptCore方法封装

    一.javaScriptCore javaScriptCore是一种JavaScript引擎,主要为webKit提供脚本处理能力,javaScriptCore是开源webkit的一部分,他提供了强大的 ...

随机推荐

  1. 2018徐州网络赛H. Ryuji doesn't want to study

    题目链接: https://nanti.jisuanke.com/t/31458 题解: 建立两个树状数组,第一个是,a[1]*n+a[2]*(n-1)....+a[n]*1;第二个是正常的a[1], ...

  2. python2.7入门--- 日期和时间

        Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能.我们今天就来看一下这方面,首先得知道,Python 提供了一个 time 和 calendar 模块可以用于格式化日 ...

  3. 如何在Moodle中显示PPT课件

    Moodle中目前是不直接支持PPT的,所以需要曲线救国: 1.安装 iSpring Free 8版本,免费版,其实是一个PPT的插件,在PPT的工具栏中有显示. 2.打开PPT后,直接在该工具中进行 ...

  4. Java线程和多线程(九)——死锁

    Java中的死锁指的就是一种多于两个线程永远阻塞的特殊状况.Java中的死锁状态至少需要多于两个线程以及资源的时候才会产生.这里,我写了一个产生死锁的程序,并且讲下如何分析死锁. 首先来看一下产生死锁 ...

  5. js 操作表格行数的删减

    沉溺了好几个月了,自从年假回来就一直在忙换工作的事情: 新环境.新同事,一如既往的工作, 那么闲话不多说,前两天师妹问我要一个类似于添加和删除的demo:闲暇时间我就参照一些代码写了一下, (发现有错 ...

  6. 每天一个Linux命令(14):dpkg命令

    dpkg命令是Debian Linux系统用来安装.创建和管理软件包的实用工具. 语法: dpkg (选项) (参数) 选项: -i:安装软件包: -r:删除软件包: -P:删除软件包的同时删除其配置 ...

  7. XPATH之normalize-space(.)和normalize-space(text())区别

    normalize,字面意思就是正规化,加上space大概意思就是空格的处理了. 官方解释是这样的: 通过去掉前导和尾随空白并使用单个空格替换一系列空白字符,使空白标准化.如果省略了该参数,上下文节点 ...

  8. python 基础篇 13 迭代器与生成器

    13. 前⽅⾼能-迭代器和⽣成器本节主要内容:1. 迭代器2. ⽣成器 ⼀. 迭代器我们之前⼀直在⽤可迭代对象进⾏迭代操作. 那么到底什么是可迭代对象. 本⼩节主要讨论可迭代对象. ⾸先我们先回顾⼀下 ...

  9. LAMP架构应用实战—Apache服务介绍与安装01

    LAMP架构应用实战—Apache服务介绍与安装01   一:Apache是什么 Apache是Apache基金会开发的一个高性能.功能强大.安全可靠.灵活的开放源码的WEB服务软件 二:Apache ...

  10. java设计模式之观察者模式以及在java中作用

    观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式.模型-视图(Model/View)模式.源-监听器(Source/Listener)模式或从属者(Dependen ...