本文實例講述了JS中g(shù)etElementsByClassName與classList兼容性問題解決方案。分享給大家供大家參考，具體如下：
document(element).getElementsByClassName(classNames:classString);
HTML5新添加了這個方法，這個方法可以通過document和html元素調(diào)用，接受一個參數(shù)，這個參數(shù)包含一個或多個類名的字符串，返回帶有制定類型的NodeList（存在性能問題），傳入的多個類型順序不重要。這個方法僅僅在標(biāo)準(zhǔn)瀏覽器下有效，在非標(biāo)準(zhǔn)瀏覽器下無效。
<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:對象不支持“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的每個類名 解決前后空格 以及兩個類名之間空格不止一個問題*/ 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）如果列表中已經(jīng)存在給定的值，刪除它，如果沒有給定的值，增加它。
支持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); } };})();
新聞熱點
疑難解答
圖片精選
