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);}};})();

getElementsByClassName与classList兼容性问题与解决方案相关推荐

html 布局兼容性,HTML+CSS入门浏览器兼容性问题及解决方案
本篇教程介绍了HTML+CSS入门浏览器兼容性问题及解决方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 问题一:不同浏览器的标签默认的外补丁和内补丁不同问题现象: ...
常见几种浏览器兼容性问题与解决方案
常见几种浏览器兼容性问题与解决方案参考文章: (1)常见几种浏览器兼容性问题与解决方案 (2)https://www.cnblogs.com/lmaster/p/6385035.html 备忘一下.
【转】常见浏览器兼容性问题与解决方案css篇
小满语:说到兼容性问题,不得不说一下IE浏览器,尤其是IE9以前,兼容性差的要哭,来,擦擦眼泪,学习一下兼容性问题的解决方案~本篇主要是布局后加样式后导致浏览器显示不统一的情形: 所谓的浏览器兼容性问 ...
[css] 移动端微信页面有哪些兼容性问题及解决方案是什么？
[css] 移动端微信页面有哪些兼容性问题及解决方案是什么? 1.rem方案通过reset js进行适配 2.vw 方案搭配px to viewport进行适配个人简介我是歌谣,欢迎和大家一起交 ...
“约见”面试官系列之常见面试题第三十六篇之CSS常见兼容性问题及解决方案（建议收藏）
CSS常见兼容性问题及解决方案: 1. 上下margin重合问题: 问题描述:相邻的margin-left和margin-right是不会重合的,但是相邻的块级元素margin-top 和margin ...
常见浏览器兼容性问题及解决方案
常见浏览器兼容性问题及解决方案: 1.不同浏览器的默认内外边距和内外补丁不同. 解决方案:css设置 *{margin:0; padding:0;} *是通配符,匹配所有html标签. 2.块级元素f ...
css 兼容解决方案,css浏览器兼容_CSS浏览器兼容性问题及解决方案
摘要腾兴网为您分享:CSS浏览器兼容性问题及解决方案,云南移动,优化大师,央视影音,心视界等软件知识,以及赣教云教学通2.0,少儿趣配音,中辉期货,单机,轻笔记,鸿合实物展台,008神器,酷有,电子 ...
1.最全整理浏览器兼容性问题与解决方案
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或 ...
VUE关于hevc编码格式的视频在各端浏览器兼容性问题的解决方案
关于hevc编码格式的视频在各端浏览器兼容性问题的解决方案 1.背景描述最近开发中遇到了一个视频的兼容问题,同样的都是MP4格式的视频,但是他们编码方式不一样就会导致可能不能正常播放,其根源在于编码 ...

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

getElementsByClassName与classList兼容性问题与解决方案相关推荐

最新文章

热门文章