HTML5新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList属性。这个classList属性是新集合类型DOMTokenList【DOM标记列表】的实例。与其它DOM集合类似，DOMTokenList是一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方扩号语法。
这个类型还定义如下方法：
add(value):将指定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value):表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除指定的字符串。
toggle(value):如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
<body class="a b c"></body>
document.body.classList;//结果：["a", "b", "c"]
document.body.classList.add("c");//不添加返回undefined
document.body.classList.add("d");//添加成功返回undefined
document.body.classList.contains("d");//返回true
document.body.classList.contains("e");//返回false
document.body.classList.remove（"d"）;//删除成功返回undefined
document.body.classList.toogle（"f"）;//不存在的情况，添加"f"
document.body.classList.toogle（"f"）;//存在的情况，删除"f"
item() 支持一个参数，为类名的索引，返回对应的类名:
document.body.classList.item(0);//结果：“a”
length 属性，表示元素类名的个数:
document.body.classList.length();//结果：“3”
浏览器兼容性：
Chrome 8+
FF 3.6+
Opera 11.50+
Safari 5.1+
某人整理的这篇还不错，移步
http://zhangyaochun.iteye.com/blog/1473167
http://www.zhangxinxu.com/wordpress/2013/07/domtokenlist-html5-dom-classlist-%E7%B1%BB%E5%90%8D/
分享到：
相关推荐
`Element.classList`是一个DOM接口，首次在HTML5规范中被引入，它允许开发者方便地操作元素的CSS类名，包括添加、删除、检查和切换类名。这个接口提供了四个主要方法： 1. **add()**：向元素的类名列表中添加一个或...
这里通常使用事件监听器（如 `addEventListener`）和 DOM 操作（如 `classList.add` 和 `classList.remove`）。 示例 JavaScript 代码： ```javascript document.addEventListener('DOMContentLoaded', function() ...
在JavaScript中，我们通常会用DOM API来操作DOM元素，例如`element.classList.contains()`方法可以用来判断一个元素是否包含特定的类。但是，`has-class-selector` 提供的是对CSS选择器字符串的检查，而非直接针对...
HTML5的classList属性是现代网页开发中的一个重要特性，它提供了更为方便的方式来操作DOM元素的CSS类。在HTML4时代，我们需要依赖JavaScript库如jQuery提供的hasClass、addClass和removeClass等方法来改变元素的样式...
在JavaScript和JavaScript工具库里征战多年，我经常有这样...好消息是，其中有一个这样的功能已经被加入到了HTML5 API里：classList。 在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面
playBtn.classList.remove('paused'); } }); ``` 此外，为了实现更丰富的交互，如拖动进度条改变播放位置，我们需要监听`input`事件并更新视频的`currentTime`属性： ```javascript var progressBar = document....
在《Class 2 DTC List.html》文件中，列出了大量与GM车辆Class 2相关的故障诊断码（DTC）。这些DTC按照特定格式进行编码，通常以字母“P”、“C”、“B”或“U”开头，后跟五位数字。每一条DTC都对应一个特定的系统...
"CSS 列表属性：list-style-image 和 list-style-position" CSS 列表属性是 CSS 中的一种样式属性，用于控制列表的样式和布局。本文主要介绍了 list-style-image 和 list-style-position 两个属性的用法和应用。 ...
Overview Package Class Tree Deprecated Index Help PREV NEXT FRAMES NO FRAMES A B C D E F G H I J L P R S U V -------------------------------------------------------------------------------- A ...
列表（Lists）有两种类型：无序列表（Unordered List）使用`<ul>`和`<li>`标签，有序列表（Ordered List）使用`<ol>`和`<li>`标签。`<li>`标签定义列表项。 图片（Images）通过`<img>`标签插入，`src`属性定义图像...
在提供的压缩包文件 "classList-master" 中，可能包含了实现这一功能的完整源码，包括详细的注释和测试用例，这对于理解和使用这个兼容方案非常有帮助。开发者可以查阅这个源码，学习如何利用JavaScript的特性来解决...
- `list-style-type`：改变列表项的标记样式。 - `background-color`：设置元素的背景色。 - `font-family` 和 `font-size`：设置字体和大小。 - `:hover`、`:active` 和 `:focus`：CSS伪类，用于定义元素在不同...
list-style: none; cursor: pointer; } ul li.active { background-color: yellow; } ``` 这里，我们为选项卡样式进行了基本的定义，包括宽度、高度、边框以及选中时的黄色背景。 JavaScript部分： ```...
<table class="table table-striped"> <th>{!! BootTable::makeSortable('name') !!} <th>{!! BootTable::makeSortable('email') !!} {{-- 其他列 --}} @foreach ($users as $user) <td>{{ $user->...
例如，当用户点击某个按钮时，可以使用`document.querySelector('.mask').classList.add('show')`来显示蒙层，而`classList.remove('show')`则可以隐藏蒙层。这里，`show`类可以用于添加额外的动画效果，如淡入淡出...
从提供的文件名"hamburger-menu-btn-list-main"来看，它可能包含实现这个功能的主要代码文件，如HTML、CSS和JavaScript。在实际项目中，这些文件通常会被组织在不同的目录下，并通过适当的构建工具（如Webpack或Gulp...
`country-list`是一个适用于Laravel 4和5的包，它提供了所有国家的名称以及对应的ISO 3166-1代码，这在处理多语言和国际化的应用程序中非常有用。 首先，`Laravel开发`标签表明我们正在讨论的是使用Laravel这个流行...
entry.target.classList.add('slide-in'); // 添加动画类 } }); }); observer.observe(document.querySelectorAll('figure')); // 监听所有figure元素 ``` 最后，`single-page portfolio`这个文件名暗示了这是...