您的位置：首页 > Web前端 > HTML5

getElementsByClassName与classList兼容性问题与解决方案

2016-08-05 18:50 369 查看

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);
}
};
})();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  byClassNam html5 classList 兼容性 解决方案
相关文章推荐
新的分享
章节导航