首页 > 其他分享> 文章详细

js实现addClass方法，classList与className有什么区别？

2019-08-12 19:56:21 阅读：349 来源： 互联网

标签：classList ele className div js class 属性

壹 ❀ 引

Jquery中addClass与removeClass是两个使用高频的方法，对于为dom元素增删class类非常方便；但如果不用JQ，使用js怎么模拟它们呢？本文主要记录下自己的实现思路。

贰 ❀ 从classList属性入手

我们随便获取一个dom对象，打印出它的对象属性，可以看到管理class类的主要有classList属性与className属性，我们先从classList属性下手。

1.classList属性

classList属性的值为DOMTokenList对象，关于DOMTokenList官方解释是一组空格分隔的标记，与Array一样具有length属性，且索引从0开始，但无法使用Array对象的方法。

不过DOMTokenList对象内置了add，remove，contains等方法，用于增删改查等操作；所以我们可以使用add，remove像JQ中addClass与removeClass方法一样操作class类。

let div = document.querySelector('div');
div.classList.add("newClass");
div.classList.remove("newClass");

2.classList兼容问题

我们发现这两个方法用的很爽啊，跟JQ一样，一个方法解决class类的操作，但比较遗憾的是，这两个方法均存在兼容问题：

虽然其它浏览器兼容性良好，但铁打的IE从9之前完全不支持classList属性，从版本10开始支持该属性，但不支持add与remove方法。

所以说如果要兼容IE，此做法不可取，但如果不用考虑IE，那就真的能像JQ一样使用便捷了。

叁 ❀ 从className属性入手

1.className与classList的区别

说完classList属性，我们再考虑从className下手；className属性与classList属性同为Dom属性且都管理class类的值，不同的是classList属性值为特殊的DOMTokenList对象，而className属性的值为普通的字符串。

我们尝试自定义一个有class类的元素，分别获取两者的值：

<div class="demo1 demo2"></div>

2.用js模拟实现

那要从className属性入手来操作class类，无非就是字符串的拼接截取操作了，这里就直接附上代码：

//自定义添加class方法
function addClass(ele, name) {
    if (name) {
        //判断该dom有没有class，有则在原class基础上增加，无则直接赋值
        ele.className ? ele.className = ele.className + " " + name : ele.className = name;
    } else {
        throw new Error("请传递一个有效的class类名");
    };
};

//自定义删除class类方法
function removeClass(ele, name) {
    //将className属性转为数组
    let classArr = ele.className.split(" "),
        index = classArr.indexOf(name);
    //将符合条件的class类删除
    index > -1 ? classArr.splice(index, 1) : null;
    ele.className = classArr.join(" ");
};

let div = document.querySelector('div');
//测试调用
addClass(div, 'demo1');
removeClass(div, 'demo1');

我在网上也看了下别人的方案，对于removeClass，我这里使用的是转成数组后利用splice删除传递的class类后，再转成字符串赋给className属性，可能有点繁琐。其他人的方案大部分是通过正则匹配替换，再去掉多余空格，但是我的正则是真的挺烂...

本文只是作为一个简单思路记忆，毕竟我第一点确实想到用classList去做操作，而且天真的以为classList是一个类数组，结果失败了..

那么就记录到这里了！

标签：classList,ele,className,div,js,class,属性
来源： https://www.cnblogs.com/echolun/p/11325782.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js实现addClass方法，classList与className有什么区别？