溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何解決JS中getElementsByClassName與classList兼容性問題”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何解決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);
}
};
})();以上是“如何解決JS中getElementsByClassName與classList兼容性問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
