壹 ❀ 引

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

那么就记录到这里了!

js实现addClass方法,classList与className有什么区别?的更多相关文章

  1. js----数组处理之splice(有js原始addClass方法哦)

    上次写了一个轮播的方法:http://blog.csdn.net/stronglyh/article/details/46833499 由于别人问我的时候,给了我html.于是乎我就看到了页面中引用了 ...

  2. js面向对象+一般方法的选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. TODO:Node.js pm2使用方法

    TODO:Node.js pm2使用方法 pm2 是一个带有负载均衡功能的Node应用的进程管理器. 当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完 ...

  4. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  5. 前端Js跨域方法汇总—剪不断,理还乱,是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  6. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  7. JS调用OC方法并传值,OC调用JS方法并传值////////////////////////zz

     iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码)     最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...

  8. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  9. C#中在AxWebBrowser控件注入JS脚本的方法

    /// <summary> /// 窗体加载 /// </summary> private void JS_Load(object sender, EventArgs e) { ...

随机推荐

  1. linux常用命令总结篇

    关于linux的一些基础命令,以前也学过,但是长时间不用还是感觉生疏了,所以记录下来以便后期温故知新. 1. cd:cd命令用来切换工作目录至dirname.cd ~ 进入用户主目录,cd - 进入之 ...

  2. 数据库语言-SQL

    SQL语言的功能概述 DDL语句引导词:Create(建立),Alter(修改),Drop(撤销) DML语句引导词:Insert,Delete,Update,Select DCL语句引导词:Gran ...

  3. 递归找到多级文件夹中所有pdf文件的py程序

    因个人需要,写了一个可以递归找到多级文件夹中所有pdf的小程序,发布出来供有需要的人参考或使用. import os import re import shutil from os.path impo ...

  4. javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式

    - 事件 - 表单提交(掌握) "onsubmit" - 单击事件(掌握) "onclick" - 页面加载成功事件(掌握) "onload" ...

  5. Spring Boot + Redis实战-利用自定义注解+分布式锁实现接口幂等性

    场景 不管是传统行业还是互联网行业,我们都需要保证大部分操作是幂等性的,简单点说,就是无论用户点击多少次,操作多少遍,产生的结果都是一样的,是唯一的.而今次公司的项目里,又被我遇到了这么一个幂等性的问 ...

  6. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  7. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

  8. 个人项目开源之c++基于epoll实现高并发游戏盒子(服务端+客户端)源代码

    正在陆续开源自己的一些项目 此为c++实现高并发的游戏盒子,平台问题需要迁移重构,所以有一些遗留问题,客户端异常断开没有处理,会导致服务器崩溃,还有基于快写代码编程平台实现的小程序切换,线程读写缓存没 ...

  9. Saltstack_使用指南12_配置管理-jinja模板

    1. 说明 下文的案例是根据上一篇文章进行的修改.因此请优先读取上一章博文内容<Saltstack_使用指南11_配置管理-状态之间依赖关系> 2. 主机规划 salt 版本 [root@ ...

  10. [Linux] ubuntu环境安装和使用elasticsearch

    wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add -apt-get install ap ...