HTMLCollection元素对象中的classlist方法

classList

element.classList是HTMLCollection对象中的一个属性方法
element.classList: 返回元素的类名，作为 DOMTokenList 对象。

1 为 <div> 元素添加多个类:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

2 为 <div> 元素移除一个类:

document.getElementById("myDIV").classList.remove("mystyle");

3 为 <div> 元素移除多个类:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

4 为 <div> 元素切换类:

document.getElementById("myDIV").classList.toggle("newClassName");

5 获取 <div> 元素的类名:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

var x = document.getElementById("myDIV").classList;
x 输出结果为:mystyle anotherClass thirdClass

6 查看 <div> 元素有多少个类名:

var x = document.getElementById("myDIV").classList.length;
x 输出结果为:3

7 获取 <div> 元素的第一个类名（索引为0）:

var x = document.getElementById("myDIV").classList.item(0);
x 输出结果为:mystyle

8 查看元素是否存在 "mystyle" 类:

var x = document.getElementById("myDIV").classList.contains("mystyle");
x 输出结果为:true

使用这些方法我们就可以更好的通过类名来操作元素，实现不同效果。尤其是classList.toggle()切换类名方法，实现点击相同元素实现不同效果，可以用在todoLIst上。

<style>
	.fun{
	color:red;
	}
</style>
<ul class='nav' id="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
    <li>大猪蹄子</li>
    <a class="fun">laji</a>
    <li>as</li>
</ul>
<ul></ul>
<ul></ul>
<ul></ul>

</body>
<script>
    var ul=document.getElementsByTagName('ul')[0];
    ul.addEventListener('click',function (e){
        // console.log(e.target.tagName) 返回点击元素的大写标签名A
        if (e.target.tagName=='A'){
            console.log(e.target.classList);//返回点击元素的类伪数组
            e.target.classList.toggle('fun')
        }
    })

这样我们就可以实现点击laji来回变换字体颜色，对todoList很有帮助

二级标题

三级标题

四级标题

五级标题

六级标题