JS中getElementsByClassName与classList兼容性问题解决方案分析

2019-11-19 11:03:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS中getElementsByClassName与classList兼容性问题解决方案。分享给大家供大家参考，具体如下：

document(element).getElementsByClassName(classNames:classString);

HTML5新添加了这个方法，这个方法可以通过document和html元素调用，接受一个参数，这个参数包含一个或多个类名的字符串，返回带有制定类型的NodeList（存在性能问题），传入的多个类型顺序不重要。这个方法仅仅在标准浏览器下有效，在非标准浏览器下无效。

<body>    <p class="p1 p">p1 p</p>    <p class="p"> p</p>    <script type="text/javascript">        var aP = document.getElementsByClassName(' p p1' );        alert(aP.length);        /*标准 ： 1*/        /*非标准：Error:对象不支持“getElementsByClassName”属性或方法*/    </script></body>

解决兼容性的方式：

var getElementsByClassName = (function (classList,/*optional*/parent){    if(typeof classList !== "string") throw TypeError("the type of classList is error");    var parent = parent || window.document;/*添加默认值*/    if(parent.getElementsByClassName){/*如果是标准浏览器支持该方法*/      return parent.getElementsByClassName(classList);    }else{/*如果不支持该方法即非标准浏览器*/      var child = parent.getElementsByTagName("*");      var nodeList = [];      /*获得classList的每个类名 解决前后空格 以及两个类名之间空格不止一个问题*/      var classAttr = classList.replace(/^/s+|/s+$/g,"").split(//s+/);      for(var j = 0,len_j = child.length; j<len_j; j++){        var element = child[j];        for(var i = 0,len_i = classAttr.length; i< len_i; i++){          var _className = classAttr[i];          if(element.className.search(new RegExp("(//s+)?"+_className+"(//s+)?")) === -1){            break;          }        }        if(i===len_i) nodeList.push(element);      }      return nodeList;    }});

classList属性

classList属性是HTML5新增的一个属性，在这个属性下有几个方法：

Add（value）将给定的字符串值增加到列表中，如果存在，就不会添加。
Contains（value）表示列表中是否存在给定的值，如果存在返回true，否则返回false。
Remove（value）从列表中删除给定的字符串。
Toggle（value）如果列表中已经存在给定的值，删除它，如果没有给定的值，增加它。

支持classList的浏览器有Firefox3.6+和chrome和IE10+。

解决兼容性：

var classList = null;(function(){    classList = function (obj){      this.obj = obj;    };    classList.prototype.add = function(value){      if(typeof value !== "string") throw TypeError("the type of value is error");      if(this.obj.classList){        this.obj.classList.add(value);      }else{        var arr = value.replace(/^/s+|/s+$/g,"").split(//s+/);        this.obj.classList +=" "+arr.join(" ");      }    };    classList.prototype.contains = function(value){      if(typeof value !== "string") throw TypeError("the type of value is error");      if(this.obj.classList){        return this.obj.classList.contains(value);      }else{        var arr = value.replace(/^/s+|/s+$/g,"").split(//s+/);        var _className = this.obj.className;        for(var i = 0,len= arr.length; i<len; i++){          if(_className.search(new RegExp("(//s+)?"+arr[i]+"(//s+)?"))===-1){            return false;          }        }        return true;      }    };    classList.prototype.remove = function(value){      if(typeof value !== "string") throw TypeError("the type of value is error");      if(this.obj.classList){        return this.obj.classList.remove(value);      }else{        var arr = value.replace(/^/s+|/s+$/g,"").split(//s+/);        var _className = this.obj.className;        for(var i = 0, len = arr.length;i<len; i++){          if(_className.search(new RegExp("(//s+)?"+arr[i]+"(//s+)?"))!==-1){            _className = _className.replace(new RegExp("(//s+)?"+arr[i]+"(//s+)?"),"");          }        }        this.obj.className = _className;      }    };    classList.prototype.toggle = function(value){      if(typeof value !== "string") throw TypeError("the type of value is error");      if(this.contains(value)){        this.remove(value);      }else{        this.add(value);      }    };})();

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】

下一篇：javascript for循环性能测试示例