DOM样式操作 上

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

样式，我们大多时候，都是写css样式，然后在节点上写class。

vue和react，虽然有一点区别，也大同小异。

其实很多样式，我们都可以通过JS来操作。

回归原生，倍感自然，上手vue,react，都不会拿锄头了，咋办呢？ 一起回归自然吧！！！

classList

classList是 Element 的属性， 也就是nodeType为1的 Node。

Node类型一共12种，当然，这不是本文的重点。

classList 是一个类型为 DOMTokenList, 其实还有很多属性都是这种类型。

Element.classList、HTMLLinkElement.relList、HTMLAnchorElement.relList 或 HTMLAreaElement.relList 返回的一组值。它和 JavaScript Array 对象一样，索引从 0 开始， 但是和数组提供的方法却完全不同。

其提供的方法如下：

• add
  添加class， 可以同时添加多个。
• contains
  是否包含某个class
• item
  按照索引获取class
• keys
  返回一个iterator, 类似[0,1,2]这种的值。
• remove
  移除class, 可以同时移除多个。
• replace
  替换某个class
• toggle
  来回切换class
• values
  返回一个iterator，类似 ["a","b","c"]这种。
• entries
  返回一个iterator，类似 [[0,"a"],[1,"b"],[2,"b"]]这种。
• forEach
  遍历

掌握了上面的防范，操作起来就666了，来一起看看世界的操作：

const { body } = document;

body.classList.add("class1", "class2");
// class1 class2

body.classList.toggle("class2");
// class1
body.classList.toggle("class2", false);  // false表示只移除，不添加
// class1

body.classList.toggle("class2", true); / true表示只添
//  class1 class2

body.classList.contains("class2")
// true

className

className是一种更加直接的操作方式， classList是后来才新增的能力。

document.body.className = "class1 class2";

没有classList之前，大家都是通过正则啊，split啊，等等方式来实现的。

小结

今天介绍了classList和class，下文我们介绍style属性和style标签。 今天你收获了吗？