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 相关文章推荐
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
JavaScript小技巧整理
Dec 30 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP session有效期问题
2009/04/26 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php的dl函数用法实例
2014/11/06 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
js 异步处理进度条
2010/04/01 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
Python paramiko模块的使用示例
2018/04/11 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
面料业务员岗位职责
2013/12/26 职场文书
高中生班主任评语
2014/04/25 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
人民调解协议书范本
2014/10/11 职场文书
大二学生自我检讨书
2014/10/23 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
高三生物教学反思
2016/02/22 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏