className && classList介绍

####className

#####1.简介

DOM操作中经常会处理元素的样式名，几乎所有的HTML标签中都包含了class属性(除了base, head, html, meta, param, script, style 以及 title标签)，用于规定当前元素的类名，这里的类名指的是我们在样式表中按照规则为元素指定的类(class)。如:

<style>
	.big{
		font-size:20px;
	}
</style>

<p id="page" class="big">内容</p>

也可以为单个元素标签添加多个类，如：

<style>
	.big{
		font-size:20px;
	}
	.textColor{
		color:#EEEEEE;
	}
</style>

<p id="page" class="big textColor">内容</p>

注:类名不能以"!"开头。

在javascript中，在获取dom元素后可以通过className属性来为其获取或设置样式(在javascript中class为保留字，所以使用className代替。)，如：

var p = document.getElementById("page");

// 获取元素样式
console.log(p.className);

// 设置元素样式(此处相当于一个清除样式的操作)
p.className = "";

之后，在控制台中会输出:

big textColor

标签会变为:

<p id="page" class="">内容</p>

如果要为标签设置多个样式，可以以空格为分隔符将类名拼接成字符串为className进行赋值，如

var clsNames = "big textColor" ;

p.className = clsNames ;

之后标签会变为:

<p id="page" class="big textColor">内容</p>

#####2.实际处理

以上只是对DOM元素的className属性进行的简单说明和基本操作，在实际的的处理中，通常会用到的类名操作包括：

添加单个类名
同时添加多个类名
判断是否包含某一类名
删除单个类名
同时删除多个类名
某一类名的toggle转换

这中间可能同时会穿插DOM元素类型判断，字符串处理，正则表达式匹配。虽然实现起来并不算复杂，但也需要我们一点点的去堆代码。由于对于className的操作的通用性比较高，此部分的代码可以进行封装，而且多数类库中都结合自身的设计原则实现了对className的处理。比如，jQuery提供了:

YUI3中提供了:

利用现有框架的API，省去了我们重复堆码的时间。

#####classList

#####1.简介

js框架提供的主要功能之一是封装那些在web开发中经常要使用到的功能，提供跨浏览器的解决方案。有时我们会抱怨：**对于那些常用而且必须的功能为什么不在w3c中进行标准化，之后浏览器厂商统一实现。这样做会减轻了开发者重复编码的负担，减少开发过程中对浏览器兼容性的考虑，使得类库更加轻量级。**正如我们现在经常会对DOM元素的className进行处理一样，如果标准有定义，浏览器本身已经实现了这部分功能，那么我们岂不是会很轻松，以后的开发也会降低对库的依赖。

其实标准也是在需求中一步步完善的，有共性的需求才会有标准的出现。HTML5的出现为的就是进一步完善标准。这其中也增加了新的DOM属性，classList属性便是其中之一。

classList的作用是用来简化DOM元素的class处理，返回一个DOM元素中className属性中包含的以空格分割的类名列表。通过

var clsList = element.classList

可以获取DOM元素的样式列表并进行处理。

#####2.classList的对象类型

element.classList对象的类型为DOMTokenList。DOMTokenList类型表示了一个用空格分割的符号(token)集合。它是一种类数组(ArrayLike)对象(就像javascript中的String对象一样)，可以像数组那样按照数字下标索引元素，当然索引是从0开始。常见的使用该类型的DOM属性包括：

HTMLElement.classList
HTMLLinkElement.relList
HTMLAnchorElement.relList
HTMLAreaElement.relList

DOMTokenList包含了以下属性和方法

// Property
length

// Method
item ( idx )//返回集合idx索引指向的token
contains ( token ) //判断集合中是否包含token
add ( token ) // 向集合中添加token
remove ( token ) // 从集合中删除token
toggle ( token ) // 如果集合中存在token，则将其删除，并返回false；如果集合中不存在token，则将token加入其中，并返回true

#####3.classList对象的操作

明白了element.classList对象的类型后，可以清楚的看到可对className进行的操作。只要把token替换成代表样式的类名即可。如：

var length = p.classList.length ; // 获取p元素中类名数量
p.classList.item(1); // 获取p元素中索引为1的类名
p.classList.add("big"); // 向p元素中添加big类
p.classList.remove("big"); // 将big类从p元素中移除
p.classList.contains("big"); // 判断p元素中是否包含名为big的类
p.classList.toggle("big"); // 如果p元素中存在big类，则将其删除；如果p元素中不存在big类，则向p中添加big类

通过以下代码可以对classList进行特性检测,来判断浏览器是否支持classList属性

var support = document.body.classList==undefined ? false : true ;

#####4.classList的缺点

浏览器兼容下欠佳，由于是新的标准，各浏览器对classList的支持以及实现方式存在差异，尤其是IE10后才支持classList。参见其兼容性列表
只能对单个类名进行操作，如果add,remove,contains,toggle方法中的类名参数包含空格，方法调用会报错，如在Chrome的console下调用
```
  document.body.classList.add("cls1 cls2");//cls1,cls2中间包含了一个空格
```
会报以下错误提示

InvalidCharacterError: The string contains invalid characters.

#####5.classList的一些跨浏览器实现

对于classList的跨浏览器实现一些个人或框架本身已经提供了比较好的解决方案和代码,如：

完，以上！

Reference

来源：oschina

链接：https://my.oschina.net/u/120785/blog/178397

标签

classname

classList