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. 一根数据线将zero w打造成上级代理路由

    目的:只要插上树莓派就使PC全部流量通过派走代理 将树莓派打造成上级路由,在任意有可用wifi的地方,让PC全部流量走代理实现代理匿名效果 (通过网线当上级路由也可以,这里不多说,方法一样) 由于是树 ...

  2. 启动Myeclipse报错“Failed to create the Java Virtual Machine”的解决办法

    我安装的是Myeclipse 10.7.1.装上好久没用,今天启动突然报错:Failed to create the Java Virtual Machine. 检查Myeclipse安装好使用时好的 ...

  3. Python-2.7 : 编码问题及encode与decode

    普通的字符串在py2.7中都是以ASCII编码的,例如str=“abc”,若含有中文则会以gbk或者gb2312编码(GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码;GBK 是 GB ...

  4. Android学习之基础知识四-Activity活动7讲(活动的启动模式)

    在实际的项目开发中,我们需要根据特定的需求为每个活动指定恰当的启动模式.Activity的启动模式一共有4种:standard.singleTop.singleTask.singleInstance. ...

  5. springbootAdmin+eureka集群+swagger

    请移步githubb下载源码.知识共享.(https://github.com/yivvonllh) 或者直接git下载(https://github.com/yivvonllh/spring-clo ...

  6. SQL Server数据库(时间戳timestamp)类型 (转载)

    timestamp介绍 公开数据库中自动生成的唯一二进制数字的数据类型. timestamp 通常用作给表行加版本戳的机制. 存储大小为 8 个字节. 不可为空的 timestamp 列在语义上等价于 ...

  7. Spring Boot 之 Profile 使用

    Spring Boot 之 Profile 使用 一个应用为了在不同的环境下工作,常常会有不同的配置,代码逻辑处理.Spring Boot 对此提供了简便的支持. 关键词: @Profile.spri ...

  8. CF1028G Guess the Numbers 构造、记忆化搜索

    传送门 考虑如果我们当前可以询问\(x\)个数,还剩下\(q\)次询问机会,我们要怎么构造询问方式? 肯定会这么考虑: 找到一个尽可能大的\(P\)满足\([x,P]\)能在每一次能询问\(x\)个数 ...

  9. HihoCoder1192 简单的树嵌入 dfs、构造

    题目传送门:http://hihocoder.com/problemset/problem/1192 大意:给出一棵$N$个点的树,边权为$1$,要求给每个点构造$M$个权值$v_1...v_M$,使 ...

  10. item 3: 理解decltype

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 decltype是一个奇怪的东西.给出一个名字或者一个表达式,de ...