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. 20145236《网络攻防》 Exp3 免杀原理与实践

    20145236<网络攻防> Exp3 免杀原理与实践 一.基础问题回答 1.杀软是如何检测出恶意代码的? 恶意代码有其特有的特征码,杀软将特征码加入检测库中,当检测到一段代码中具有这样的 ...

  2. Spring配置文件和SpringMVC配置文件 web.xml配置文件 保存自用

    话不多说,最近在周末自己抽时间写一些框架做的系统,当所有东西都需要自己配置时候发现自己压根记不住这么多类和路径,所以日常总结就变得尤为重要了 db-config.properties 将配置文件常量提 ...

  3. oracle 查询分区表的最大分区以及分区字段的最大值

    select 'select max(' || column_name || ') from ' || owner || '.' || name || ';'  from DBA_PART_KEY_C ...

  4. Linux安装solr

    solr官网下载地址为:http://mirror.bit.edu.cn/apache/lucene/solr/ 以7.6.0版本作为实践 1.下载 wget http://mirror.bit.ed ...

  5. IDEA学生免费申请教程

    1.点击网址,进入申请页面https://www.jetbrains.com/zh/student/ 2.由于网页是全英文的,可以用浏览器将页面翻译成中文版,更方便操作 3.因为没有大学的邮箱地址,所 ...

  6. Python脱产8期 Day01

    一 编程语言与目的 1.有特定语法,可以通过编程的方式,让计算机进行识别,从而让计算机根据人的意愿完成人想让其完成的事 2.控制奴役计算机,让其完成你想让它完成的事,从而解放人力. 二 计算机 五大组 ...

  7. 提示文件过大无法复制到U盘怎么解决

    1.U盘作为一个便携的移动存储工具,在我们的生活中扮演重要的角色,但 是我们经常会遇到在复制文件到U盘中的时候,U盘明显有很大的空间,却 提示文件过大无法复制,今天,我教大家一步解决这个问题!! 2. ...

  8. QT pri 文件的作用

    i 是什么东西?包含(include)的首字母.类似于C.C++中的头文件吧,我们可以把 *.pro 文件内的一部分内容单独放到一个 *.pri 文件内,然后包含进来. 接前面的例子,我们将源文件的设 ...

  9. 查看电脑本机的ip地址

    第一步:打开cmd 第二步:输入:ipconfig,回车 第三步:找到无线局域网适配器下的IPv4地址,那就是本机的ip地址

  10. SkylineGlobe 6.6 三维地图上实现自定义右键菜单示例代码

    1.OnRButtonDown.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...