在此之前,jQuery的hasClass、addClass、removeClass我们已经再熟悉不过了,然而我们并不会在每一个项目中都会去使用 jQuery或者Zepto,譬如在移动端的网页中,考虑到传说中的性能和静态资源的请求量等因素,我们通常会选择采用原生js,而对于元素的class 操作。你首先想到的就是className,这位伙计完美地得到了包括ie6在内的所有古现代浏览器的支持,尽管它的功能简直弱爆,但是人们在相当长的一 段时间还是用得不亦乐乎,甚至一些基础库也只是通过className进行了一些扩展。但是随着浏览器的不断升级,更多丰富的JavaScript API得到了支持,本文讲述的classList就是其中一个。它可以方便地对元素的类名进行增删改查,当然,API的设计者并不会帮你做所有的事,它仍 然存在一些小小的缺陷,但相比className,这已经是一个飞跃了。

classList的兼容性如下图所示:


 

从上图可以看到,严重拖后腿的还是那个IE,直到IE10,微软才总算反映了过来。而在移动端方面,除了安卓2.3及其以下版本的webview不支持
classList,其它浏览器终端都能很好地支持。由于安卓2.3的设备和IE一样已然明日黄花,所以我们仍然可以和classList愉快的玩耍,尤
其是在基于webkit内核的终端。现在,就让我们进入正题吧(尼玛,原来前面一堆都是废话)

classList是html元素对象的成员,它的使用非常简单。我们通过以下方式:

console.dir(document.body.classList);
  1. 1
  2. 2

代码laycode - v1.1

发现它的构造器(constructor)是DOMTokenList。它提供了这些已知的API:length、item、add、remove、contains、toggle。其它灰色部分如toString可以先无视。

下面我们对classList的成员进行逐一介绍:

length

静态属性。获取元素类名的个数,使用方式:

var len = document.body.classList.length;
  1. 1
  2. 2

代码laycode - v1.1

item

方法。获取元素的类名,接受一个参数,即数字索引。使用方式:

//如果index超出范围,则返回null
var cls = document.body.classList.item(index);
  1. 1
  2. 2
  3. 3

代码laycode - v1.1

add

方法。用于增加元素的类,接受一个参数,即类名。使用方式:

document.body.classList.add('myclass');

//遗憾的是,它一次性只能增加一个类,比如以下方式将会报错
document.body.classList.add('class1 class2');
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

代码laycode - v1.1

如果需要增加多个类,你只能执行多次add。

remove

方法。用于删除元素的类,接受一个参数,即类名。和add一样,它一次性只能删除一个类。使用方式:

document.body.classList.remove('myclass');
  1. 1
  2. 2

代码laycode - v1.1

contains

方法。用于检测元素是否包含某个类,返回Boolean值。使用方式:

document.body.classList.contains('myclass'); //返回true或者false
  1. 1
  2. 2

代码laycode - v1.1

toggle

方法。这个家伙是add、remove、contains的三合一版,不仅能检测元素是否包含某个类,而且还具备增删功能,即如果存在某个类,就remove掉,如果不存在,就add一下。返回一个Boolean值。使用方式:

//如果body不存在classtest的类名,就会给body增加一个classtest的类
document.body.classList.toggle('classtest'); //true //再执行一遍,classtest已被删除了
document.body.classList.toggle('classtest'); //false
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6

代码laycode - v1.1

classList的便捷性只是原生JavaScript的冰山一角,事实上标准浏览器对dom的操作已经非常方便了,尤其是选择器的查找,如 getElementsByClassName、querySelector和无敌的querySelectorAll等等。当你使用jQuery或者 Zepto根本停不下来的时候,或许你需要抚慰下你忙碌的双手,拥抱Native,那是一片广袤无边的天地!

classList详解,让你的js方便地操作DOM类的更多相关文章

  1. 详解CorelDRAW中关于群组的操作

    CorelDRAW软件中的“群组”功能键主要用于整合多个对象.在进行比较复杂的绘图编辑时,通常会有很多的图形对象,为了方便操作,可以对一些对象设定群组.设定群组以后的多个对象,将被看作一个单独的对象. ...

  2. jQuery Validate验证框架详解(jquery.validate.min.js)

    原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...

  3. 定时器详解和应用、js加载阻塞、css加载阻塞

    1.setTimeout().setInterval()详解和应用 1.1 详解: setTimeout.setInterval执行时机 1.2 存在问题: setInterval重复定时器可能存在的 ...

  4. Firebug控制台详解,让调试js代码变得更简单

    http://www.open-open.com/lib/view/open1373120100347.html Firebug是网页开发的利器,能够极大地提升工作效率. Firebug控制台详解 控 ...

  5. 线程池底层原理详解与源码分析(补充部分---ScheduledThreadPoolExecutor类分析)

    [1]前言 本篇幅是对 线程池底层原理详解与源码分析  的补充,默认你已经看完了上一篇对ThreadPoolExecutor类有了足够的了解. [2]ScheduledThreadPoolExecut ...

  6. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  7. jquery的offset().top 和position().top 详解 和如何用js实现

    1 jquery定义: offset().top 相对于当前文档的坐标(的高度) ps:包括滚动条卷去的高度 position().top 返回的是相对于其定位的祖辈元素的坐标(的高度) ps:包括滚 ...

  8. Google V8编程详解(五)JS调用C++

    http://blog.csdn.net/feiyinzilgd/article/details/8453230 最近由于忙着解决个人单身的问题,时隔这么久才更新第五章. 上一章主要讲了Google ...

  9. node源码详解(四) —— js代码如何调用C++的函数

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource4 本博客同步在https://cnodejs.o ...

随机推荐

  1. 关于 js 对象 转 字符串 和 深拷贝 的探讨

    随着更多语言的支持 **json** 作为数据传输和存储的媒体,已经非常成熟且应用广泛.却存在致命硬伤,不携带 **对象方法** .在数据传输和存储中,这是恰当的和合理的. 但是在更多的应用场景中,又 ...

  2. 触发显示和隐藏 div

    <script> window.onload = function(){ var oDiv1 = document.getElementById("div1"); va ...

  3. Word 2013 无法撤销操作的错误

    来自 <http://delxu.blog.51cto.com/975660/1409139> 关闭正在运行的所有程序. 按Win-R,在运行框中键入regedit,然后单击“确定”. 在 ...

  4. jmeter插件之VariablesFromCSV

    项目需求: 由于该项目的特殊性,需要新建很多个jmx脚本,并且这些jmx的全局用户变量都一样,如果要修改的话,没法做到统一修改. 实现思路: 为了满足需求,在jemter官网找到该插件Variable ...

  5. iOS URL加解密

    URL加解密 背景介绍 iOS 下URL加解密,项目使用AFNetworking 虽然是使用HTTPS,但是从安全方面考虑,在很多情况下还是需要对url的参数进行加密的. 接口如 https://19 ...

  6. MySQL用户权限控制一例

      Preface       I supposed we are encountering a situation that there's an anonymous user has connec ...

  7. jsp 添加jstl标签

    jsp页面中添加下列代码即可使用jstl标签. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix=" ...

  8. Ubuntu 安装Google浏览器

    Ubuntu自带的浏览器是火狐浏览器,使用的时候多多少少有些不方便,这里安装Googel浏览器. 下载 可以到 Ubuntu chrome去下载安装包. 安装 首先到下载的根目录 cd ~/Downl ...

  9. Qt 实时读串口数据,并将读到的数据从网口发送出去

    需求: 1. 要试试从串口读取数据 2. 将读到的数据从网口发送出去 3.开机启动 4. 没有界面 第一部分 配置Qt Pro文件  需要Qt += serialport network 第二部分 - ...

  10. 虚拟现实-VR-UE4-获取UE4

    UE4现在虽然是开源,但是并不是免费的,在你的游戏成功后,回收取5%费用和每个月19美元的费用 所以,第一步,进去UE4官网:https://www.unrealengine.com/zh-CN/wh ...