IE不支持getElementsByClassName最终完美解决方案

目前可以这么解决，判断浏览器支不支持这个方法，如果支持就不管；如果不支持，就在document对象里加入getElementsByClassName这个方法，这样的写法有一个好处，即不管有没有原生函数你都不用去修改代码。

通常先使用getElementsByTagName("*")取出文档中所有元素，然后进行遍历，使用正则表达式找出匹配的元素放入一个数组返回。由于IE5不支持document.getElementsByTagName("*")，要使用分支document.all以防错误

下面的方法完美支持了document写法


代码如下:

if(!document.getElementsByClassName){
document.getElementsByClassName = function(className, element){
var children = (element || document).getElementsByTagName('*');
var elements = new Array();
for (var i=0; i<children.length; i++){
var child = children[i];
var classNames = child.className.split(' ');
for (var j=0; j<classNames.length; j++){
if (classNames[j] == className){
elements.push(child);
break;
}
}
}
return elements;
};
}

最终的方案为： 


代码如下:

var getElementsByClassName = function (searchClass, node,tag) {
if(document.getElementsByClassName){
var nodes = (node || document).getElementsByClassName(searchClass),result = [];
for(var i=0 ;node = nodes[i++];){
if(tag !== "*" && node.tagName === tag.toUpperCase()){
result.push(node)
}else{
result.push(node)
}
}
return result
}else{
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [],
current,
match;
var i = classes.length;
while(--i >= 0){
patterns.push(new RegExp("(^|\s)" + classes[i] + "(\s|$)"));
}
var j = elements.length;
while(--j >= 0){
current = elements[j];
match = false;
for(var k=0, kl=patterns.length; k<kl; k++){
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) result.push(current);
}
return result;
}
}

赞 (0)

相关推荐

  • 推荐一个封装好的getElementsByClassName方法

    我们知道,原生的JS给我们提供了getElementsByClassName方法,可以通过此方法获取到含有某指定class的节点集合,注意是集合,也就是此函数返回一个数组. 但是,IE却并不支持这个方法,但这方法却是很有实用性,所以,我们又不得不专门为IE实现这么一个函数. 复制代码 代码如下: function getElementsByClassName(oEle,sClass,sEle){   if(oEle.getElementsByClassName){     return oEle

  • IE浏览器不支持getElementsByClassName的解决方法

    在DOM3里已经加入了getElementsByClassName这个方法,然而IE9.10以外的其它版本均不支持,这是一块伤痛啊! 目前可以这么解决,判断浏览器支不支持这个方法,如果支持就不管:如果不支持,就在document对象里加入getElementsByClassName这个方法,这样的写法有一个好处,即不管有没有原生函数你都不用去修改代码. 网上部分人直接定义一个getElementsByClassName函数,但是这样的话就需要把代码中所有使用document.getElement

  • javascript getElementsByClassName 和js取地址栏参数

    getElementsByClassName() 为了从一大堆HTML代码中找出我们的树状菜单(也许有多个),我们先来实现一个通过className找DOM节点的方法:getElementsByClassName.这是对浏览器自有DOM方法的一个简单但实用的扩充. 此方法有两个参数:ele指出以哪个DOM节点为根节点寻找(也就是说只找ele的子节点),className指出符合条件的节点的class属性中必须包含怎样的className.它的返回值是一个数组,存放了所有符合条件的节点. 复制代码

  • javascript getElementsByClassName实现代码

    先来看一下代码:(支持多个class查询和在某个范围内进行查询) 复制代码 代码如下: /* * 根据元素clsssName得到元素集合 * @param fatherId 父元素的ID,默认为document * @tagName 子元素的标签名 * @className 用空格分开的className字符串 */ function getElementsByClassName(fatherId,tagName,className){ node = fatherId&&document.

  • 关于IE中getElementsByClassName不能用的问题解决方法

    今天使用getElementsByClassName写了段小程序,满怀欣喜的准备去测试,在ff,谷歌等主流浏览器上测试都没问题,在IE9上也没问题,在IE6.8中测试的时候就出现问题了,浏览器报错.纠结了下代码,貌似没问题,果断找度娘...终于发现问题所在,然来是IE6.8中不支持getElementsByClassName这种方法.随后在网上搜索解决方法,找到了一个比较好的方法,是个老外写的一个方法,定睛一看居然是05年的问题了...先上代码: 复制代码 代码如下: * Developed b

  • js 获取class的元素的方法 以及创建方法getElementsByClassName

    复制代码 代码如下: function getElementsByClassName(n) { var classElements = [],allElements = document.getElementsByTagName('*'); for (var i=0; i< allElements.length; i++ ) { if (allElements[i].className == n ) { classElements[classElements.length] = allEleme

  • javascript getElementsByClassName函数

    今天在网上看到的一个根据ClassName获取Elements的脚本,在此记录一下,以便日后使用. 复制代码 代码如下: var getElementsByClassName = function(searchClass, node, tag) { if (document.getElementsByClassName) { return document.getElementsByClassName(searchClass) } else { node = node || document;

  • IE不支持getElementsByClassName最终完美解决方案

    目前可以这么解决,判断浏览器支不支持这个方法,如果支持就不管:如果不支持,就在document对象里加入getElementsByClassName这个方法,这样的写法有一个好处,即不管有没有原生函数你都不用去修改代码. 通常先使用getElementsByTagName("*")取出文档中所有元素,然后进行遍历,使用正则表达式找出匹配的元素放入一个数组返回.由于IE5不支持document.getElementsByTagName("*"),要使用分支docume

  • Vue路由回退的完美解决方案（vue-route-manager）

    目录 路由管理器 背景 入门 解决问题 Methods 总结 路由管理器 记录每次跳转的vue-route name, 内置了一些处理回退的方法, 方便回退到指定页面 背景 笔者所开发的项目中经常遇到各种花式跳转, 例如从引导页的选择操作到最后的提交审核中间会经过无数页面, 甚至中间所做的操作不同也会导致最后回退深度不同 假设项目中 起始点都是选择页, 最终都会抵达提交页 并且都会返回到最初的页面(选择页) 选择页 --> B --> C --> 提交页  情况一 从选择到提交 中间经历

  • Ajax跨域的完美解决方案

    公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域.这里对跨域做个简单介绍以及提供几种解决办法. 由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,所以AJAX是不允许跨域的.这里提供自己常用的三种方法: 1.jsonp访问 JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问: 实现方式 1) <

  • Ubuntu Server 16.04安装MySQL设置远程访问出现问题的完美解决方案(error:10061)

    说明: 一个朋友在使用Ubuntu Server 16.04安装MySQL,设置远程访问的时候出现了问题,请我帮忙.但是,我也没有使用过Ubuntu安装MySQL,于是乎搜索了很多技术文件,比着葫芦画瓢.但是,由于MySQL版本的差异,导致在安装设置的过程中出现了一些问题:就是不能远程访问. 一.安装mysql 1. 安装需要使用root账号,如果不会设置root账号的请参考Linux公社的其他文章.安装mysql过程中,需要设置mysql的root账号的密码,不要忽略了. sudo apt-g

  • Java Web开发防止多用户重复登录的完美解决方案

    Java Web开发防止多用户重复登录的完美解决方案

    目前web项目中,很多情况都是可以让同一个账户信息在不同的登录入口登录这次,这样子就不那么美好了. 推荐阅读: Java 多用户登录限制的实现方法 现在有两种解决方案: 1.将用户的登录信息用一个标志位的字段保存起来,每次登录成功就标记1,注销登录就标记为0,当标记为1的时候不允许别人登录. 2.将用户的登录信息保存在application内置作用域内, 然后利用session监听器监听每一个登录用户的登录情况. 很显然,第一种方式 每次登录 都需要操作数据库,多了一些不必要的性能开销,而且在登

  • Windows 64位下装安装Oracle 11g，PLSQL Developer的配置问题,数据库显示空白的完美解决方案(图文教程)

    Windows 64位下装安装Oracle 11g，PLSQL Developer的配置问题,数据库显示空白的完美解决方案(图文教程)

    安装pl sql 后,若下图的数据库处为空.则需要安装32位的客户端,说明pl sql不支持64位客户端连接. 解决办法: 1.下载32位Oracle客户端,并安装 2.设置PLSQL Developer 打开pl sql 在"工具" - "首选项" - "连接"中,设置 OCI库 (即oracle 32位的安装位置) D:\app\Administrator\product\11.2.0\client_1\oci.dll 如下图: 3.添加环境

  • Android 6.0调用相机图册崩溃的完美解决方案

    最近客户更新系统发现,以前的项目在调用相机的时候,闪退掉了,很奇怪,后来查阅后发现,Android 6.0以后需要程序授权相机权限,默认会给出提示,让用户授权,个人感觉这一特性很好,大概如下: 导入Android V4, V7包! Android Studio 导入很简单,右键项目后找到dependency就ok了. 继承AppCompatActivity public class MainActivity extends AppCompatActivity 引入需要的类库 import and

  • 浅谈android获取设备唯一标识完美解决方案

    本文介绍了浅谈android获取设备唯一标识完美解决方案,分享给大家,具体如下: /** * deviceID的组成为:渠道标志+识别符来源标志+hash后的终端识别符 * * 渠道标志为: * 1,andriod(a) * * 识别符来源标志: * 1, wifi mac地址(wifi): * 2, IMEI(imei): * 3, 序列号(sn): * 4, id:随机码.若前面的都取不到时,则随机生成一个随机码,需要缓存. * * @param context * @return */ p

  • MySql版本问题sql_mode=only_full_group_by的完美解决方案

    1.查看sql_mode select @@sql_mode 查询出来的值为: ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION 2.去掉ONLY_FULL_GROUP_BY,重新设置值. set @@sql_mode ='STRICT_TRANS_TABLES,NO_ZE

  • NODE.JS跨域问题的完美解决方案

    NODE.JS跨域问题的完美解决方案

    这几天公司同事(前端)写页面的时候一直说拿不到想要的JSON,安卓iOS那边是可以拿到的,但他也是新手也不知道为什么只知道是js跨域问题,然后问我我也不懂前端我开始百度, 有人说是谷歌浏览器跨域要设置一下,然后我就在谷歌浏览器的目标后面加一个 --disable-web-security 但是后来发现依然报错,依然拿不到想要的数据.后来也不停的找找找也没有什么眉目. 直到今天百度了一下PHP的跨域启发了我,于是百度找到了node.js的跨域问题,最后我在 app.js 路由设置里面加了一段跨域代

随机推荐