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. 移动App测试实战—专项测试

       我们在进行了手工的功能测试之后,也开发了一些自动化测试用例,并且做了性能测试之后,测试工作看似比较完整了.但是当我们的App在大量的用户那里被安装和使用的时候,还是会有很多我们之前没有预料的问题 ...

  2. oracle 添加登陆数据库触发器--记录IP 地址

    ----触发器--- ---创建中间插入的表 create table session_history tablespace bap_data as (select sid,username,prog ...

  3. 使用pycharm调用模块后字体变灰

    点击小灯泡提示出现以下内容:This inspection detects names that should resolve but don't. Due to dynamic dispatch a ...

  4. 【转】python中的一维卷积conv1d和二维卷积conv2d

    转自:https://blog.csdn.net/qq_26552071/article/details/81178932 二维卷积conv2d 给定4维的输入张量和滤波器张量来进行2维的卷积计算.即 ...

  5. sonar6.7.6安装及汉化

    sonar下载地址 https://www.sonarqube.org/downloads/ 下载请选择 然后解压 在目录F:\tools\sonarqube-6.7.6\bin\windows-x8 ...

  6. Python排序算法——希尔排序(Shell’s Sort)

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10793487.html 一.希尔排序(Shel ...

  7. linux中断源码分析 - 软中断(四)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 在上一篇文章中,我们看到中断实际分为了两个部分,俗称就是一部分是硬中断,一部分是软中断.软中断是专门用于处理中断 ...

  8. 安装Debian后做的一些事情

    1.source.list # aliyun deb http://mirrors.aliyun.com/debian/ stretch main non-free contrib deb http: ...

  9. arm那些事

    ARM简介 ARM的商业模式: ARM只负责设计IC,并且出卖自己的设计IP(版权). ARM自己不生产芯片,而是把设计IP授权给其他半导体厂商来生产芯片. 严格地说,ARM并不是一家半导体厂商.   ...

  10. JsonUtils序列化与反序列化工具

    直接见代码,需要引入的包如下文,需要谷歌的包. package com.cxf.value; import com.fasterxml.jackson.core.type.TypeReference; ...