JS中getElementsByClassName与classList兼容性问题解决方案分析
本文实例讲述了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;jclassList属性
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程序设计有所帮助。