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 相关文章推荐
jquery中的事件处理详细介绍
Jun 24 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
Angular短信模板校验代码
Sep 23 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
webpack打包js的方法
2018/03/12 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
服务员自我评价
2014/01/25 职场文书
大学生创业策划书
2014/02/02 职场文书
阅兵口号
2014/06/19 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
关于长城的导游词
2015/01/30 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
详解Python类和对象内容
2021/06/22 Python