如何根据元素的className获取元素?
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获取元素?的更多相关文章
- 根据ClassName获取元素节点
功能描述: 通过ClassName获取元素节点,并解决兼容性问题 实现效果: 编码思路: 利用getElementsByTagName选出所有元素,再根据ClassName条件进行筛选 代码示例:
- 疑问:使用find_elements_by_ios_predicate定位元素组,获取元素的index没有按照顺序
通过ios Appium Inspect查看到的元素信息如下: eList=self.driver.find_elements_by_ios_predicate('type == “XCUIEleme ...
- js根据className获取元素封装
虽然有了getElementsByClassName,但是ie低版本不支持,所以我们需要单独定义一个getByClass function getByClass(className,parent){ ...
- H5_0017:通过元素自定义属性值获取元素对象,并获取属性值
// 通过元素的属性值查找对象 // document.querySelectorAll("[data]").forEach(function(e) ...
- 获取元素属性 和 获取元素的CSS属性
- JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型
基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...
- 『与善仁』Appium基础 — 22、获取元素信息的操作(一)
目录 1.获取元素文本内容 (1)text()方法 (2)get_attribute()方法 (3)综合练习 2.获取元素在屏幕上的坐标 1.获取元素文本内容 (1)text()方法 业务场景: 进入 ...
- javascript学习之通过class获取元素
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript通过className选择元素
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- day12 Python列表
list#类 列表概括 li = [1,2,13,["石振文",["19", 10],"庞麦郎"],"charon",& ...
- logbak 配置相关
一.配置简单 1. 配置简单,易于上手,通过logback.xml文件进行配置,如果没有配置的话,执行默认配置 <configuration> <appender name=&quo ...
- 【Codeforces 526D】Om Nom and Necklace
Codeforces 526 D 题意:给一个字符串,求每个前缀是否能表示成\(A+B+A+B+\dots+A\)(\(k\)个\(A+B\))的形式. 思路1:求出所有前缀的哈希值,以便求每个子串的 ...
- MySQL(二)数据的检索和过滤
使用频率最高的SQL语句应该就是select语句了,它的用途就是从一个或多个表中检索信息,使用select检索表数据必须给出至少两条信息:想选择什么,以及从什么地方选择 一.检索数据 1.检索单个列 ...
- OSGeo.OGR.Geometry
#region 程序集 ogr_csharp.dll, v2.0.50727 // D:\KM行业需求\C++\gdal17_cSharp\ogr_csharp.dll #endregion usin ...
- 随笔一个dom节点绑定事件
以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的 ...
- ADO.NET的Connection Timeout和Command Timeout (转载)
每次对数据库连接时,我们有时候会碰到连接超时或者命令超时,这两个超时是不一样的.以ADO.NET为例,当客户端和服务器端连接时,碰到的超时情况主要有下面几种:当从连接池获取一个连接时,碰到超时.当建立 ...
- Luogu3352 ZJOI2016 线段树 概率、区间DP
传送门 考虑对于每一个位置\(i\),计算所有可能的结果出现的概率. 定义一个区间\([l,r]\)为对于\(x\)的极大区间,当且仅当\(\max \limits _{i=l}^r \{a_i\} ...
- Luogu3199 HNOI2009 最小圈 分数规划、SPFA
传送门 可以发现它的式子是一个分数规划的式子,所以可以二分答案,将所有边权减掉当前二分值之后跑一边$SPFA$判断负环即可. 然而这道题把$BFS-SPFA$卡掉了却没卡$DFS-SPFA$ 出题人: ...
- (译)理解 LSTM 网络 (Understanding LSTM Networks by colah)
@翻译:huangyongye 原文链接: Understanding LSTM Networks 前言:其实之前就已经用过 LSTM 了,是在深度学习框架 keras 上直接用的,但是到现在对LST ...