平时写HTML时多用class来命名,为很少用id来命名,主要原因就是class使用起来比较灵活。

但是万恶的JS在操作DOM的时候对ie6+只提供了getElementById和getElementsByTagName两个方法来查找DOM。

这时候就很尴尬了,就不得不在HTML里加入各种各样的id。看了就烦,不爽

Js有提供一个通过class名查找DOM的方法:getElementsByClassName();

但是。。。。。。只支持ie9+   -.-,哎呀好尴尬。。。

只好自己写一个兼容IE的getElementsByClassName()方法出来:

 // indexOf兼容
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(x) {
var result = -1;
if (this.length == 0) {
return result;
}
for (var i = 0; i < this.length; i++) {
if (this[i] === x) {
result = i;
break;
}
}
return result;
}
}
// getElementsByClassName兼容
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(c_name, ele) {
//用于输出找到的匹配的DOM元素
var arr = [];
// 查找元素,并计算数组长度
var allTag = (ele || document).getElementsByTagName('*');
var tagLength = allTag.length;
// 对传进来的c_name参数进行分割,并计算数组长度
var cNameList = c_name.split(' ');
var cNameLength = cNameList.length;
// 对所有的tag元素进行遍历
for (var i = 0; i < tagLength; i++) {
// 对每一个tag的class属性进行分割,并计算数组长度
var classList = allTag[i].className.split(' ');
var listLength = classList.length;
// 定义一个空数组
var judge = [];
for (var t = 0; t < cNameLength; t++) {
// 如果cNamelist可以在classList中找到,就给judge push一个true
if (classList.indexOf(cNameList[t]) !== -1) {
judge.push(true);
}
}
// 判断judge是否相等cNameLength,如果相等,表示是我们需要的元素
if (judge.length === cNameLength) {
arr.push(allTag[i]);
}
}
return arr;
}
}
 <div id="box">
<div class="one two"></div>
<div class="one three"></div>
<div class="one"></div>
<div class="one"></div>
</div>
<div class="one"></div>
<div class="one"></div>

这个兼容代码可以实现:

1. document.getElementsByClassName("one two");

  只找到<div class="one two"></div>

2. document.getElementsByClassName("one");

  找到所有div中存在class名为one的元素

3.document.getElementsByClassName("one",document.getElementById("box"));

  找到box下的所有存在class名为one的元素

DOM getElementsByClassName IE兼容方案的更多相关文章

  1. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  2. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  3. Emoji表情符号兼容方案(适用ios,android,wp等平台)

    http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(え ...

  4. Drawable 着色的后向兼容方案

    看到 Android Weekly 最新一期有一篇文章:Tinting drawables,使用 ColorFilter 手动打造了一个TintBitmapDrawable,之前也看到有些文章使用这种 ...

  5. [ios2]Emoji表情符号兼容方案 【转】

    Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji ...

  6. localStorage兼容方案

    localStorage是H5的存储方案,各大浏览器支持都相当不错,唯一悲催的就是IE,这个浏览器界的另类总是显得格格不入. IE “Internet选项”->“安全”中有一个“启动保护模式”的 ...

  7. 最新CSS兼容方案

    CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: ...

  8. Emoji表情符号兼容方案

    Emoji表情符号兼容方案 一 什么是Emoji    emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. em ...

  9. 移动端 ios 长按复制兼容方案

    移动端页面,需要复制一段文字码. 在ios中,长按文字区域,默认选中的范围,超出了我长按的文字区域, 把上面的图片和下面的另一个div的文字也给我包含进来了,并不是我想要的! 举个例子: 如下图: 1 ...

随机推荐

  1. ASP.NET Core 之 Identity 入门(一)

    前言 在 ASP.NET Core 中,仍然沿用了 ASP.NET里面的 Identity 组件库,负责对用户的身份进行认证,总体来说的话,没有MVC 5 里面那么复杂,因为在MVC 5里面引入了OW ...

  2. 轻量级“集合”迭代器-Generator

    Generator是PHP 5.5加入的新语言特性.但是,它似乎并没有被很多PHP开发者广泛采用.因此,在我们了解PHP 7对Generator的改进之前,我们先通过一个简单却显而易见的例子来了解下G ...

  3. HashMap与TreeMap源码分析

    1. 引言     在红黑树--算法导论(15)中学习了红黑树的原理.本来打算自己来试着实现一下,然而在看了JDK(1.8.0)TreeMap的源码后恍然发现原来它就是利用红黑树实现的(很惭愧学了Ja ...

  4. AES加密

    package com.edu.hpu; import java.math.BigInteger; import java.security.MessageDigest; import java.se ...

  5. Python应用03 使用PyQT制作视频播放器

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/ ...

  6. WebGIS中等值线前端生成绘制简析

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 等值线是GIS制图中常见的功能,一般有两种思路:一种是先进行插 ...

  7. springmvc+mybatis+spring 整合 bootstrap html5

    A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技 ...

  8. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  9. 2016/12/30_Python

    今天主要学习内容: Python: 1.字典的使用 1)怎么创建字典 dicts = {"name":"juncx","age":17} d ...

  10. Visual Studio Code——Angular2 Hello World 之 2.0

    最近看到一篇用Visual Studio Code开发Angular2的文章,也是一篇入门教程,地址为:使用Visual Studio Code開發Angular 2專案.这里按部就班的做了一遍,感觉 ...