JS中g(shù)etElementsByClassName與classList兼容性問(wèn)題解決方案分析

更新時(shí)間：2019年08月07日 09:51:24 作者：MaoTr

這篇文章主要介紹了JS中g(shù)etElementsByClassName與classList兼容性問(wèn)題解決方案,結(jié)合實(shí)例形式分析了getElementsByClassName與classList的使用方法、原理及兼容性問(wèn)題的處理技巧,需要的朋友可以參考下

本文實(shí)例講述了JS中g(shù)etElementsByClassName與classList兼容性問(wèn)題解決方案。分享給大家供大家參考，具體如下：

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

HTML5新添加了這個(gè)方法，這個(gè)方法可以通過(guò)document和html元素調(diào)用，接受一個(gè)參數(shù)，這個(gè)參數(shù)包含一個(gè)或多個(gè)類(lèi)名的字符串，返回帶有制定類(lèi)型的NodeList（存在性能問(wèn)題），傳入的多個(gè)類(lèi)型順序不重要。這個(gè)方法僅僅在標(biāo)準(zhǔn)瀏覽器下有效，在非標(biāo)準(zhǔn)瀏覽器下無(wú)效。

<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);
        /*標(biāo)準(zhǔn) ： 1*/
        /*非標(biāo)準(zhǔn)：Error:對(duì)象不支持“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;/*添加默認(rèn)值*/
    if(parent.getElementsByClassName){/*如果是標(biāo)準(zhǔn)瀏覽器支持該方法*/
      return parent.getElementsByClassName(classList);
    }else{/*如果不支持該方法即非標(biāo)準(zhǔn)瀏覽器*/
      var child = parent.getElementsByTagName("*");
      var nodeList = [];
      /*獲得classList的每個(gè)類(lèi)名 解決前后空格 以及兩個(gè)類(lèi)名之間空格不止一個(gè)問(wèn)題*/
      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新增的一個(gè)屬性，在這個(gè)屬性下有幾個(gè)方法：

Add（value）將給定的字符串值增加到列表中，如果存在，就不會(huì)添加。
Contains（value）表示列表中是否存在給定的值，如果存在返回true，否則返回false。
Remove（value）從列表中刪除給定的字符串。
Toggle（value）如果列表中已經(jīng)存在給定的值，刪除它，如果沒(méi)有給定的值，增加它。

支持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);
      }
    };
})();

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: