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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 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
PHP HTTP 认证实例详解
2016/11/03 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
深入分析PHP设计模式
2020/06/15 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
JavaScript字符串对象
2017/01/14 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python内置加密模块用法解析
2019/11/25 Python
Python hmac模块使用实例解析
2019/12/24 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
办公室秘书岗位职责范本
2014/02/11 职场文书
关于环保的活动方案
2014/08/25 职场文书
晚会开幕词
2015/01/28 职场文书
督导岗位职责
2015/02/04 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL