封装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的一部分,他提供了强大的 ...
随机推荐
- (数据科学学习手札11)K-means聚类法的原理简介&Python与R实现
kmeans法(K均值法)是麦奎因提出的,这种算法的基本思想是将每一个样本分配给最靠近中心(均值)的类中,具体的算法至少包括以下三个步骤: 1.将所有的样品分成k个初始类: 2.通过欧氏距离将某个样品 ...
- POJ1236_A - Network of Schools _强连通分量::Tarjan算法
Time Limit: 1000MS Memory Limit: 10000K Description A number of schools are connected to a compute ...
- P1095 守望者的逃离
P1095 守望者的逃离 题目描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这 ...
- Python: 列表的两种遍历方法
方法一:以列表中元素的下标进行访问 def traverse1(list1): for i in range(len(list1)): print(list1[i], end=' ') print() ...
- 【jQuery】 选择器
[jQuery] 选择器 资料: w3school http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 1. 标签选择器 : $(& ...
- css的水平居中和垂直居中总结
Html代码: <div class="md-warp"> <div class="md-main">块级元素</div> ...
- 51单片机实现外部中断00H-FFH、000-255、0000-1023
外部中断00H-FFH #include< reg51.h> #define uint unsigned int #define uchar unsigned char sfr P0M0 ...
- Django 运行Admin 页面时出现 UnicodeDecodeError: 'gbk' codec can't decode byte XXXX解决方法
具体报错信息 Traceback (most recent call last): File "D:\Anaconda3\lib\site-packages\django\core\hand ...
- 为 Ubuntu/Anaconda/pip 添加国内下载源
背景 正在看 tensorflow-lite 压缩模型的部分,结果 tutorial 一上来就要卸旧版安装 tf-nightly (新版?反正小白下就vans了) 然而好不容易才编译好源码舍不得删.又 ...
- kaldi常用文件查看指令
目录 1. ark特征文件 2. FST文件 3. mdl模型文件 4. 决策树文件 5. ali.gz对齐文件 资料来自kaldi官方文档. 转载注明出处. 1. ark特征文件 copy-feat ...