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

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

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

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

    
p1 p
    
 p
    

解决兼容性的方式：

var getElementsByClassName = (function (classList,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 = [];
      
      var classAttr = classList.replace(/^s+|s+$/g,"").split(/s+/);
      for(var j = 0,len_j = child.length; j

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

更多关于Javascript相关内容可查看本站专题：《Javascript操作DOM技巧总结》、《Javascript页面元素操作技巧总结》、《Javascript事件相关操作与技巧大全》、《Javascript查找算法技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript错误与调试技巧总结》
希望本文所述对大家Javascript程序设计有所帮助。