通过Class获取标签,兼容的几种思路
在js中通过document.getElementsByClassName()在低版本IE浏览器中不兼容。然后我写了几种方案,大家可以参考参考。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p class=" r aaa">3</p>
<p>4</p>
<p class="aaa">5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</body>
</html>
js代码
<script>
    // 方案1 :正则
    function getClass(className){
        // 获取所有标签
        var lis = document.getElementsByTagName('*');
        // 保存过滤后的标签
        var arr = [];
        for(var i=0;i<lis.length;i++){
            // 创建正则,通过正则的test方法判断当前元素的class中是否存在正则中的内容,返回一个true或者false
            if(new RegExp(className).test(lis[i].className)){
                // 如果有则添加到arr中
                arr.push(lis[i]);
            }
        }
        // 返回过滤后的数组。
        return arr;
    }
    // 方案2 :利用字符串的indexOf判断 找不到返回-1
    function getClass1(className){
        // 获取所有元素
        var lis = document.getElementsByTagName('*');
        // 保存过滤后的数组
        var arr = [];
        for(var i=0;i<lis.length;i++){
            // 判断所有标签的class有没有我们想要的
            if(lis[i].className.indexOf(className)!=-1){
                // 添加到新数组
                arr.push(lis[i]);
            }
        }
        // 返回
        return arr;
    }
    console.log(getClass('aaa'));
    // [p.r.aaa, p.aaa]
    console.log(getClass1('aaa'));
    // [p.r.aaa, p.aaa]
</script>
还可以将获取到的class转换成数组,然后挨个判断,不过这样反而更麻烦了。
建议通过父级再通过*获取元素,性能会好一些。
唉,感觉自己写新手慢慢的看不懂了,也许真的是自己进步了吧,不知道是高兴还是悲伤。
通过Class获取标签,兼容的几种思路的更多相关文章
- selenium定位方式-获取标签元素:find_element_by_xxx
		
定位方式取舍# 唯一定位方式.多属性定位.层级+角标定位(离目标元素越近,相对定位越好) # 推荐用css selector(很少用递进层次的定位)# 什么时候用xpath呢? 当你定位元素时,必须要 ...
 - Java获取ip地址的几种方法
		
以下内容介绍下java获取ip地址的几种思路. 1.直接利用java.net.InetAddress类获取,不过这种方法只在windows环境下有效,在linux环境下只能获取localhost地址( ...
 - JS获取标签方法及兼容处理
		
document.getElementById('Id名'); // 所有浏览器 document.getElementsByTagName('标签名'); // 所有浏览器 document.ge ...
 - java:JavaScript2:(setTimeout定时器,history.go()前进/后退,navigator.userAgent判断浏览器,location.href,五种方法获取标签属性,setAttribute,innerHTML,三种方法获取form表单信息,JS表单验证,DOM对象,form表单操作)
		
1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...
 - jquery获取标签内容,编辑内容
		
一.获取页面元素 三种方式获取页面中元素的内容. input标签使用:.val()获取 标签下的html及文本内容:.html() 仅获取标签下的纯文本内容:.text() <head> ...
 - JS---DOM---设置和获取---标签内容和文本内容
		
设置和获取---标签内容和文本内容 总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作 ...
 - windows下获取IP地址的两种方法
		
windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...
 - Java中获取键盘输入值的三种方法
		
Java中获取键盘输入值的三种方法 Java程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值 ...
 - php获取post参数的几种方式   RPC 规定接收取值方式 $GLOBALS['HTTP_RAW_POST_DATA'];
		
http://www.cnblogs.com/zhepama/p/4022606.html PHP默认识别的数据类型是application/x-www.form-urlencoded标准的数据类型. ...
 
随机推荐
- Python基于pandas的数据处理(二)
			
14 抽样 df.sample(10, replace = True) df.sample(3) df.sample(frac = 0.5) # 按比例抽样 df.sample(frac = 10, ...
 - 这几天对Redis的初探,写一个阶段性的东西
			
原来基于wcf写了一个交互框架,其中自定义了一个session队列,用于保存客户端连接的一些信息. 这几天在想如何将这个wcf框架做负载均衡,于是将session队列拆分出来,用一个共享的内存进行处理 ...
 - low到一定程度了
 - FMX下Edit只能输入数字
			
procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word; var KeyChar: Char; Shift: TShiftState) ...
 - java面向对象(封装-继承-多态)
			
框架图 理解面向对象 面向对象是相对面向过程而言 面向对象和面向过程都是一种思想 面向过程强调的是功能行为 面向对象将功能封装进对象,强调具备了功能的对象. 面向对象是基于面向过程的. 面向对象的特点 ...
 - quick cocos2d-x 入门---井字棋
			
学习quick cocos2d-x 第二天 ,使用quick-x 做了一个井字棋游戏 . 我假设读者已经 http://wiki.quick-x.com/doku.php?id=zh_cn阅读了这个链 ...
 - vim 配置
			
backspace有几种工作方式,默认是vi兼容的.对新手来说很不习惯.对老vi 不那么熟悉的人也都挺困扰的.可以用set backspace=indent,eol,start来解决. indent: ...
 - JS设计模式初探
			
目的:设计模式众多,尝试用博客记录下学到的不同设计模式的优劣,方便以后查阅. 前言:半年前看高程的时候看到设计模式这章,云里雾里,不是看不明白,而是不明白为啥要如此麻烦只为创建一个对象.直到最近完成了 ...
 - mysql客户端导入sql文件命令
			
mysql -h localhost -u root -p dbname < filename
 - Microsoft .NET Native Developer Preview 内部初探(1)
			
Microsoft .NET Native Developer Preview 内部初探(1) MS 前段时间发布了.NET Native Developer Preview,被广大人员赋予“C++的 ...