getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持
  我们知道,原生的方法,是getElementById()和getElementsByTagName(),这两个不会有兼容问题,但是遇到class的问题还是没法解决。所以这里总结两种封装方法,可以用它们来获取指定的class元素。当然,对于现代浏览器开发,还可以使用querySelector()和querySelectorAll(),他们的功能更加强大。

1.数组遍历的方法:

function getByClass(sClass,oParent){
var parent = oParent || document;
var aEles = parent.getElementsByTagName('*');
var arr = []; for(var i=0; i<aEles.length; i++){ var aClass = aEles[i].className.split(' '); for(var j=0; j<aClass.length; j++){
if(aClass[j] == sClass){ arr.push(aEles[i]);
}
}
}
return arr;
}

2.正则匹配的方法:

function getElementsByClassName(oParent, sClass){
var aEle = oParent.getElemnetsByTagName('*');
var result = [];
var re = new RegExp('\\b' + sClass + '\\b', 'i'); for(var i=0; i<aEle.length; i++){
if(re.test(aEle[i].className)){
result.push(aEle);
}
}
return result;
}

最后,值得一提是,前端页面实现中,性能的影响往往出现在DOM的操作中。此外,还要注意元素的回流和重绘问题。

摘自:http://www.cnblogs.com/zhangxiaohang/p/5523157.html

如何根据元素的className获取元素?的更多相关文章

  1. 根据ClassName获取元素节点

    功能描述: 通过ClassName获取元素节点,并解决兼容性问题 实现效果: 编码思路: 利用getElementsByTagName选出所有元素,再根据ClassName条件进行筛选 代码示例:

  2. 疑问:使用find_elements_by_ios_predicate定位元素组,获取元素的index没有按照顺序

    通过ios Appium Inspect查看到的元素信息如下: eList=self.driver.find_elements_by_ios_predicate('type == “XCUIEleme ...

  3. js根据className获取元素封装

    虽然有了getElementsByClassName,但是ie低版本不支持,所以我们需要单独定义一个getByClass function getByClass(className,parent){ ...

  4. H5_0017:通过元素自定义属性值获取元素对象,并获取属性值

            // 通过元素的属性值查找对象         // document.querySelectorAll("[data]").forEach(function(e) ...

  5. 获取元素属性 和 获取元素的CSS属性

  6. JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型

    基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...

  7. 『与善仁』Appium基础 — 22、获取元素信息的操作(一)

    目录 1.获取元素文本内容 (1)text()方法 (2)get_attribute()方法 (3)综合练习 2.获取元素在屏幕上的坐标 1.获取元素文本内容 (1)text()方法 业务场景: 进入 ...

  8. javascript学习之通过class获取元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Javascript通过className选择元素

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. node中npm安装模块的网络问题

    最近使用node开发时,发现所有的依赖模块都安装不了啦,一直报错如下 rollbackFailedOptional: verb npm-session 5a4a66a1b8d06dc3 后来才发现是由 ...

  2. jQuery 动画效果

    推荐网址:http://www.php100.com/manual/jquery/,用法教学,包括实例. 分类:显示隐藏.淡入淡出.滑动.自定义. <%@ Page Language=" ...

  3. JAVA中map的分类和各自的特性

    java为数据结构中的映射定义了一个接口java.util.Map,他实现了四个类,分别是:HashMap,HashTable,LinkedHashMapTreeMap Map不允许键重复,但允许值重 ...

  4. BZOJ3252 攻略 贪心、长链剖分

    传送门 给树竟直接给父子关系!!!真良心 首先一个贪心策略:每一次选择的链一定是所有链中权值最大的.这应该比较显然 那么我们接下来考虑如何维护这个贪心.我们可以使用长链剖分进行维护,对权值进行长链剖分 ...

  5. CF97C Winning Strategy 构造、图论

    题目传送门:http://codeforces.com/problemset/problem/97/C 题意:给出$n$与一个范围在$[0,1]$内的递增序列$P_0-P_n$,试构造一个无穷序列$\ ...

  6. C# DllImport 相对路径无法找到dll

    原文:C# DllImport 相对路径无法找到dll 如题,近期在开发过程中,需要调用C++的库,一般来说,使用下面的方法即可正常调用: [DllImport("hci_sys.dll&q ...

  7. C#基础巩固(1)-多态+简单工厂

    多态 如果要简要的描述多态的话,我个人是这样理解的:通过继承,父类定义方法,具休的实现由子类进行. 01代码 //父类 class Person { public virtual void skill ...

  8. el标签将时间戳转换为特定格式以及将数值保留特定小数

    jsp中/el表达式中将后台传来的时间戳格式化为年月日时分秒 1.引入相关标签库 <%@taglib prefix="c" uri="http://java.sun ...

  9. HDU3062&&HDU1814

    Preface 两道2-SAT模板题. HDU3062 看题目就一眼2-SAT.一对夫妻看成一个变量,之间的矛盾可以看成限制. 考虑不同席的限制,相当于选了\(i\)就不选\(j\),即必选\(j'\ ...

  10. [开源 .NET 跨平台 Crawler 数据采集 爬虫框架: DotnetSpider] [五] 如何做全站采集?

    [DotnetSpider 系列目录] 一.初衷与架构设计 二.基本使用 三.配置式爬虫 四.JSON数据解析与配置系统 五.如何做全站采集 如何做全站采集? 很多同学加群都在问, 如何使用Dotne ...