如何根据元素的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 ...
随机推荐
- day14 Python百分号字符串拼接
拼接 # -*- coding:utf8 -*- #%s字符串,%d数字msg = '%s am %s my %s is %s'% (2,"charon","pluto& ...
- oracle远程物化视图
一.创建远程物化视图日志 源端: CREATE MATERIALIZED VIEW LOG ON tozwdb.test tablespace tozwdb_data WITH ROWID; 二.付权 ...
- leetcode 199. Binary Tree Right Side View 、leetcode 116. Populating Next Right Pointers in Each Node 、117. Populating Next Right Pointers in Each Node II
leetcode 199. Binary Tree Right Side View 这个题实际上就是把每一行最右侧的树打印出来,所以实际上还是一个层次遍历. 依旧利用之前层次遍历的代码,每次大的循环存 ...
- python opencv show图片,debug技巧
debug的时候可以直接把图片画出来debug. imshow函数就是python opencv的展示图片的函数,第一个是你要起的图片名,第二个是图片本身.waitKey函数是用来展示图片多久的,默认 ...
- Cesium学习1:如何在本机的Apache tomcat9.0.8服务器中打开cesium的index.html页面
Cesium的官方网站:https://cesiumjs.org/ 点击这个按钮来获取最新的Cesium:下载Cesium. 下载完成之后将zip文件解压到你选择的新目录,解压之后文件目录类似于下图. ...
- sql截取日期/时间的单独部分,比如年、月、日、小时、分钟等等
可以使用EXTRACT() 函数.(oracle和mysql都有该函数) 语法: EXTRACT(unit FROM date) date 参数是合法的日期表达式.unit 参数可以是下列的值:YEA ...
- Linux kernel 之 socket 创建过程分析
重要结构体 struct socket 结构体 // 普通的 BSD 标准 socket 结构体 // socket_state: socket 状态, 连接?不连接? // type: socket ...
- Android学习之基础知识五—RecyclerView(滚动控件)
RecyclerView可以说是增强版的ListView,不仅具有ListVIew的效果,还弥补许多ListView的不足. 一.RecyclerView的基本用法 与百分比布局类似,Recycler ...
- linux中yum与rpm区别
一.源代码形式 1. 绝大多数开源软件都是直接以原码形式发布的 2. 源代码一般会被打成.tar.gz的归档压缩文件 3. 源代码需要编译成为二进制形式之后才能够运行使用 ...
- 【LeetCode191】Number of 1 Bits★
1.题目 2.思路 方法一:常规方法. 方法二:给面试官惊喜的解法. 3.java代码 方法一代码: public class Solution { // you need to treat n as ...