如何根据元素的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 ...
随机推荐
- DBN 大作业
- leetcode 235. Lowest Common Ancestor of a Binary Search Tree 236. Lowest Common Ancestor of a Binary Tree
https://www.cnblogs.com/grandyang/p/4641968.html http://www.cnblogs.com/grandyang/p/4640572.html 利用二 ...
- PAT A1136 A Delayed Palindrome (20 分)——回文,大整数
Consider a positive integer N written in standard notation with k+1 digits ai as ak⋯a1a0 ...
- java static 在java 中的使用。
static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被static修饰的成员变量和成员方法独立于该类的任何 ...
- Luogu P2661 信息传递
传送门 一眼就能看出来是个并查集 但是并不会写... 看了一下题解说是并查集求最小环qwq 所以,每次加入第i个小同学,判断如果他要告诉的小同学k最后会告诉他(也就是转回来了), 就说明出现了一个环, ...
- lesson3:小程序
问题: 一·设计思想 创建一个静态变量,利用构造函数在每次创建对象时运行的机制,计算创建对象个数. 二·程序流程图 三·程序源代码 public class Test9{ public static ...
- 你真的会python嘛?
前言 我这个博客一直都是一些技术分享,show code的地方,我从来没有写过个人生活或者情感杂谈,当然我也从来没有谈论过我对什么东西的喜恶. 很多人喜欢喷XX语言,喜欢谈论XX和YY的优缺,甚至凑了 ...
- Linux系列教程(七)——Linux常用命令之帮助和用户管理命令
上篇博客我们介绍了Linux文件搜索命令,其中find是用的最多的也是功能最强大的文件或目录搜索命令,和另一个搜索命令locate的区别是,find命令是全盘搜索,刚创建的文件也能搜索的到,而loca ...
- SQL Server中使用convert进行日期转换(转载)
一般存入数据库中的时间格式为yyyy-mm-dd hh:mm:ss 如果要转换为yyyy-mm-dd 短日期格式.可以使用convert函数.下面是sqlserver帮助中关于convert函数的声 ...
- [Python]Python 使用 for 循环的小例子
[Python]Python 使用 for 循环的小例子: In [7]: for i in range(5): ...: print "xxxx" ...: print &quo ...