js实现addClass方法,classList与className有什么区别?

 壹 ❀ 引

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

 贰 ❀ 从classList属性入手

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

js实现addClass方法,classList与className有什么区别?

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类的操作,但比较遗憾的是,这两个方法均存在兼容问题:

js实现addClass方法,classList与className有什么区别?

虽然其它浏览器兼容性良好,但铁打的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>

js实现addClass方法,classList与className有什么区别?

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是一个类数组,结果失败了..

那么就记录到这里了!

上一篇:关于删除彻底删除虚拟机


下一篇:打开虚拟机的时候报错 无法打开内核设备"\\.\Global\vmx86": 系统找不到指定的文件.是否在安装 VMwar