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. mysql用户操作、权限分配、远程登录设置

    对最近mysql的常用运维命令进行整理 查看使用的哪个配置文件启动的mysql 1. ps aux|grep mysql|grep 'my.cnf' 如果启动的命令中选择了配置文件,则可以查询出来,也 ...

  2. 转载 线程初步了解 - <第一篇>

    操作系统通过线程对程序的执行进行管理,当操作系统运行一个程序的时候,首先,操作系统将为这个准备运行的程序分配一个进程,以管理这个程序所需要的各种资源.在这些资源之中,会包含一个称为主线程的线程数据结构 ...

  3. Unicode(UTF-8, UTF-16)令人混淆的概念(转)

    文章转自http://www.cnblogs.com/kingcat/archive/2012/10/16/2726334.html (http://swiftlet.net/archives/cat ...

  4. CVE-2018-14424 use-after-free of disposed transient displays 分析报告

    漏洞描述 GDM守护进程不能正确的取消导出在D-Bus 接口上已经被销毁的display对象,这造成本地用户可以触发UAF,从而使系统崩溃或造成任意代码执行. 调试环境 gdm版本: 3.14.2(通 ...

  5. OpenStack keystone节点搭建(官方2018年4月份文档)

    参考文档:https://docs.openstack.org/install-guide/common/conventions.html https://docs.openstack.org/mit ...

  6. linux中VI编写C程序。。。

    在linux中编写C程序时不像编写shell那样开头要#!/bin/bash,但是在C程序中要指定头文件(头文件是指输入输出,宏等,而且要首先声明,也是必须要开始就声明的) 写好C代码后要给C文件赋予 ...

  7. Daily Sentence(英语每日一句)

    1.When you want to give up, remember why you started. 当你想要放弃的时候,请记住当初你为何而开始. 2.It does not do to dwe ...

  8. Linux下安装jdk+maven +git

            Linux系统下的操作,一直不是很熟悉.作为一名java开发工程师,感到很惭愧.因此把自己的阿里云服务器安装环境相关的东西给记录下来,方便后续查阅.         本文所采用的Lin ...

  9. zookeepeer4字命令实践

    环境 leader:192.168.116.143 fllower:192.168.116.142 fllower:192.168.116.144 命令:conf——查看其他主机的配置文件 [root ...

  10. Python 学习 第七篇:函数1(定义、调用和变量的作用域)

    函数是把一些语句集合在一起的程序结构,用于把复杂的流程细分成不同的组件,能够减少代码的冗余.代码的复用和修改代码的代价. 函数可以0个.1个或多个参数,向函数传递参数,可以控制函数的流程.函数还可以返 ...