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

2023-08-18 01:32:04 332

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

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

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


p1p
p

varaP=document.getElementsByClassName('pp1');
alert(aP.length);
/*标准：1*/
/*非标准：Error:对象不支持“getElementsByClassName”属性或方法*/

解决兼容性的方式：

vargetElementsByClassName=(function(classList,/*optional*/parent){
if(typeofclassList!=="string")throwTypeError("thetypeofclassListiserror");
varparent=parent||window.document;/*添加默认值*/
if(parent.getElementsByClassName){/*如果是标准浏览器支持该方法*/
returnparent.getElementsByClassName(classList);
}else{/*如果不支持该方法即非标准浏览器*/
varchild=parent.getElementsByTagName("*");
varnodeList=[];
/*获得classList的每个类名解决前后空格以及两个类名之间空格不止一个问题*/
varclassAttr=classList.replace(/^\s+|\s+$/g,"").split(/\s+/);
for(varj=0,len_j=child.length;j
classList属性
classList属性是HTML5新增的一个属性，在这个属性下有几个方法：
Add（value）将给定的字符串值增加到列表中，如果存在，就不会添加。

Contains（value）表示列表中是否存在给定的值，如果存在返回true，否则返回false。

Remove（value）从列表中删除给定的字符串。

Toggle（value）如果列表中已经存在给定的值，删除它，如果没有给定的值，增加它。

支持classList的浏览器有Firefox3.6+和chrome和IE10+。

解决兼容性：
varclassList=null;
(function(){
classList=function(obj){
this.obj=obj;
};
classList.prototype.add=function(value){
if(typeofvalue!=="string")throwTypeError("thetypeofvalueiserror");
if(this.obj.classList){
this.obj.classList.add(value);
}else{
vararr=value.replace(/^\s+|\s+$/g,"").split(/\s+/);
this.obj.classList+=""+arr.join("");
}
};
classList.prototype.contains=function(value){
if(typeofvalue!=="string")throwTypeError("thetypeofvalueiserror");
if(this.obj.classList){
returnthis.obj.classList.contains(value);
}else{
vararr=value.replace(/^\s+|\s+$/g,"").split(/\s+/);
var_className=this.obj.className;
for(vari=0,len=arr.length;i
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。

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

热门推荐

随机推荐