解决IE不兼容document.getElementByClassName()的实现方法

时间: 2018-05-26阅读: 2381标签: 兼容

在使用原生js时候,需要通过class样式名来获取dom对象,就直接使用document.getElementByClassName(),发现在IE8以下是不支持document.getElementByClassName()这种方法的。那么我们如何来实现获取classname的兼容写法呢?


方法一:为IE8以下增加document.getElementsByClassName函数,代码如下:

/MSIE\s*(\d+)/i.test(navigator.userAgent);
var isIE=parseInt(RegExp.$1?RegExp.$1:0);
if(isIE>0&&isIE<9){
    document.getElementsByClassName=function(cls){
        var els=this.getElementsByTagName('*');
        var ell=els.length;
        var elements=[];
        for(var n=0;n<ell;n++){
            var oCls=els[n].className||'';
            if(oCls.indexOf(cls)<0)        continue;
            oCls=oCls.split(/\s+/);
            var oCll=oCls.length;
            for(var j=0;j<oCll;j++){
                if(cls==oCls[j]){
                    elements.push(els[n]);
                    break;
                }
            }
        }
        return elements;
    }
}

这样就可以直接使用document.getElementByClassName()方法了。


方法二:自己写一个方法来获取classname.代码如下:

function getByClassName(obj,cls){//obj目标元素,cls要获得的class名
    var element = obj.getElementsByTagName('*');//将目标下的所有子元素获取到
    var result = []; //定义一个数组,存放获得的classname = "cls" 的所有值
    for(var i = 0; i< element.length; i++){
        if(element[i].className == cls){
            result.push(element[i]);
        }
    }
    return result;
}

使用:

<div id= "diva">
    <div class = "divb">我是div</div>
</div>

<script >
var a = document.getElementById("diva");
var result =getByClassName(a,"divb");
</script>

如果要求的div的父元素没有属性id,或者更向上一层的也没有属性id,那么我能想到的办法就是通过document.body获取到body元素再向下逐层查找。(注:请尽量不要用document.body和document.all)


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/825

如何解决css3浏览器兼容?

css3作为页面样式的表现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明。

vue-cli3配置IE浏览器兼容性

在查询如何兼容ie时,首先是查看vue cli官网,浏览器兼容性,感觉官网说的不是太明晰(小白一枚,实在不太懂),然后就直接百度了,网上方法基本类似,都是用 browserslist,babel-polyfill等

document.head.appendChild(element) 在 IE8 及以下报错

问题:在开发中会遇到动态添加 script 标签的情况。但是在 IE8 以下会报如下错误:SCRIPT5007: Unable to get value of the property appendChild: object is null or undefined,解决办法如下

border-radius:50%,在安卓上存在兼容问题

做移动端开发时为了做适配,通常采用rem作为单位,下面来写一个圆角,相同的代码,有的是正圆,有的不是,ios,pc均显示正常

vue项目中兼容ie8以上浏览器的配置

首先需要在根目录的index.html文件加入如下代码;安装babel-polyfill 插件;在入口文件main.js文件中引入插件;需要在webpack.base.config.js配置文件中做如下修改

CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法

:nth-child是css3的一个比较常用的选择器。它用于匹配属于其父元素中的子元素,不论元素的类型。 它的参数可以是数字、关键词或公式。

IE实现css3效果兼容

Shadow阴影Color,设置阴影颜色。Direction,设置阴影的方向,角度也是从0°~315°取值(跟PS的投影效果非常的相似。)Strength,设置投影强度,数值越大越模糊。Gradient渐变

前端常见的CSS兼容性问题

双倍浮动BUG;表单元素行高不一致;IE6(默认16px为最小)不识别较小高度的标签(一般为10px);图片添加超链接时,在IE浏览器中会有蓝色的边框;最小高度min-height不兼容IE6

用JS写个兼容IE8浏览器的类选择器

有时我们项目中会尽量使用原生js,这种情况下连最简单的类选择器可能都要进行兼容性处理。getElementsByClassName是后来引入的,历史不如getElementById和getElementsByTagName。越是新的特性,浏览器的兼容相对就越差。

web浏览器在线兼容性测试工具_检测html网页在不同浏览器上的兼容问题

对于web前端开发者而言,为了确保html代码在不同浏览器上能正常工作,是一件很麻烦的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,下面就为大家推荐一下比较流行的web浏览器在线兼容性测试工具。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!