如何根据元素的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 ...
随机推荐
- oracle 索引的几种方式
一.查询索引的高度 select index_name,blevel,leaf_blocks,num_rows,distinct_keys,clustering_factorfrom user_ind ...
- leetcode 958. Check Completeness of a Binary Tree 判断是否是完全二叉树 、222. Count Complete Tree Nodes
完全二叉树的定义:若设二叉树的深度为h,除第 h 层外,其它各层 (1-h-1) 的结点数都达到最大个数,第 h 层所有的结点都连续集中在最左边,这就是完全二叉树. 解题思路:将树按照层进行遍历,如果 ...
- 说说CDN
本文今天主要讲解三个方面: 第一.没有CDN之前采取的常用策略是什么; 第二.CND的概念; 第三.CDN的优点和缺点(凡是有利也有弊,任何东西都是相对的); 一.没有CDN之前采取的常用策略是什么 ...
- nginx做负载均衡和tomcat简单集群
Nginx做负载均衡和TOMCAT简单集群 1.下载安装nginx及其依赖包 ...
- HTML5中的execCommand命令
HTML5中的execCommand命令 在html5中,可以通过execCommand方法来运行一条命令,每一条命令都将对用户通过鼠标所选取的内容执行一些操作. 1. execCommand方法 浏 ...
- PAT A1124 Raffle for Weibo Followers (20 分)——数学题
John got a full mark on PAT. He was so happy that he decided to hold a raffle(抽奖) for his followers ...
- AI 线性代数
1.标量.向量.矩阵和张量 1)标量(scalar),一个数,例如自然数和实数. 2)向量(vector),一列有序数.可以看作只有一列的矩阵. 3)矩阵(matrix),二维数组.转置(transp ...
- Objective-C 实现读写锁
读写锁 @interface RWLock : NSObject - (void)readLock; - (void)readUnlock; - (void)writeLock; - (void)wr ...
- 介绍一个axios调试好用的工具:axios-mock-adapter
上一篇文章中写到用promise时应注意的问题,这一篇文章继续介绍一个可以和axios库配合的好工具: axios-mock-adapter.axios-mock-adapter可以用来拦截http请 ...
- ES6 Promise 异步操作
最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...