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


Posted in Javascript onAugust 07, 2019

本文实例讲述了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);
      }
    };
})();

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
正则表达式基础与常用验证表达式
Jun 16 Javascript
javascript for循环性能测试示例
Aug 07 #Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 #Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 #Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 #Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 #Javascript
javascript中的数据类型检测方法详解
Aug 07 #Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 #Javascript
You might like
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
用js实现计算加载页面所用的时间
2010/04/02 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
Python自定义线程类简单示例
2018/03/23 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
举例讲解Python常用模块
2019/03/08 Python
Python连接字符串过程详解
2020/01/06 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
上学迟到的检讨书
2014/01/11 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
担保书格式范文
2015/09/22 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android