[导读] 前面为大家介绍了一些有关html5新添加的选择器，分别是queryselector()，queryselectorall()和getelementsbyclassname()。这三个都有自己独特的功能，大家有需要的话可以看html5实战与剖析中的相关内容。今天为大
前面为大家介绍了一些有关HTML5新添加的选择器，分别是querySelector()，querySelectorAll()和getElementsByClassName()。这三个都有自己独特的功能，大家有需要的话可以看HTML5实战与剖析中的相关内容。今天为大家介绍classList属性。
classList属性究竟是干什么的，我们先撇下classList不管。我们考虑这么一个问题，那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法。将拥有类名li、meng和long，三个类名中的类名meng删除。代码如下
HTML代码
<p>梦龙小站</p>
JavaScript代码
//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];
//获取类名字符串并拆分成数组
var allClassName = p.className.split(" ");
//找到要删除的类名
var i, len,
pos = -1;
for(i=0, len = allClassName.length; i <p> </p><p> 预览效果</p><p> </p><p><img alt="HTML5实战与剖析之classList属性" src="https://img.php.cn/upload/article/000/000/007/2da4de7a67b9a0d9247cb6b7e2ec0cf4-0.png?x-oss-process=image/resize,p_40"></p><p> </p><p> </p><p> 为了从的元素类名中删除”meng”，上面这些代码都是必须的。通过类似的算法替换类名并确认元素中是否包含该类名。若是添加类名可以通过拼接字符串完成，但是必须通过检测确定不会多次添加相同的类名，很多JavaScript库都是实现了这个方法，简化操作。而删除类名则是先要获取已经有的类名，找到要删除类名的位置，然后进行删除。</p><p> 通过上面的方法可以看出，要实现一个简单的删除功能要写好几行代码，若不想写好几行代码就得引入一个库用库中的方法才可以。有了HTML5就不用那么麻烦了，我们可以用HTML5中的classList属性来完成这些步骤。这个classList属性是新集合类型DOMTokenList的实例。与其他DOM集合类似。DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法也可以使用方括号语法。此外，下面是给这个新类型定义的方法。</p><p> </p><h1> 1、remove(value)</h1><p> </p><p> remove(value)方法表示从列表中删除给定的字符串。小例子如下：</p><p> </p><p> HTML代码</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站"><img
src="https://img.php.cn/upload/skill/000/000/081/179040786932301.jpg" alt="btpanel phpsite 宝塔面板PHP网站" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站" class="overflowclass">btpanel phpsite 宝塔面板PHP网站</a>
<p class="overflowclass">宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理</p>
</div>
<a rel="nofollow" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><pre class="brush:xml;"><p>梦龙小站</p>
JavaScript代码
//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];
alert(p.classList) //li meng long
p.classList.remove("meng")
alert("p.className: " + p.className) //p.className: li long
预览效果
2、contains(value)
contains(value)方法表示列表中是否存在给定的值，如果存在就返回”true”，否则返回”false”小例子如下：
HTML代码
<p>梦龙小站</p>
JavaScript代码
//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];
alert(p.classList.contains("meng")) //true
alert(p.classList.contains("menglong")) //false
3、add(value)
add(value)方法表示列表中的字符串添加到列表中。如果已经存在就不添加了。小例子如下：
HTML代码
<p>梦龙小站</p>
JavaScript代码
//添加类名 menglong
//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];
p.classList.add("menglong");
alert("p.className: " + p.className) //p.className: li meng long menglong
预览效果
4、toggle(value)
toggle(value)方法，如果列表中已经存在给定的值，删除它;如果列表中没有给定的值，添加它。小例子如下：
HTML代码
<p>梦龙小站</p> <p>梦龙小站</p>
JavaScript代码
//切换类名 meng
//获取要删除类名li的p
var p = document.getElementsByTagName("p");
var i, len;
for(i=0, len = p.length; i<p> </p><p> 预览效果</p><p> </p><p><img alt="HTML5实战与剖析之classList属性" src="https://img.php.cn/upload/article/000/000/007/27bc4584915d27955bea27a2bb3fab0b-3.png?x-oss-process=image/resize,p_40"></p><p> </p><p> </p><p> 有关classList的小例子们已经为大家呈现了，通过小例子就能把这些小方法展现和解释清楚了。有了classList，除非你需要全部删除所有类名，或者完全重写元素的class属性，否则用不到className属性了，而且还附加很多实用的方法。支持classList属性的浏览器有Firefox 3.6+ 和Chrome。</p><p> HTML5实战与剖析之classList属性就为大家介绍到这里了，点滴的积累就是明天的成功，一天学点HTML5，有一天一定能成功学会的。感谢大家支持梦龙小站，更多有关HTML5的更新敬请关注梦龙小站关于HTML5实战与剖析的更新。</p>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
