JavaScript的 classList API

2017-11-30

JavaScript的 classList API 实现jQuery中的 addClass() removeClass()相同效果

document.body.classList.add(‘className’)相当于Jquery中的addClass()
document.body.classList.remove(‘className’)相当于Jquery中的removeClass()
document.body.classList.toggle(‘classtest’); //点击删除添加
添加或删除多个类
div.classList.add(“foo”,”bar”);
div.classList.remove(“foo”, “bar”);
classList.contains表示往类名列表中是否包含该类名xiang’dang’yujQuery中的hasClass方法
document.body.classList.contains(“c”);

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body class="a b c">

</body>
<script>
    var cList = document.body.classList
    console.log(document.body.classList);
    //["a", "b", "c", value: "a b c"]
    console.log(document.body.classList.item(0));//a
    console.log(document.body.classList.item(1));//b
    console.log(document.body.classList.item(2));//c

    //add() 支持一个类名字符串参数。表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略。
    document.body.classList.add("c");
    document.body.classList.length

    //remove() 支持一个类名字符串参数。表示往类名列表中移除该类名
    document.body.classList.remove("c");
    document.body.classList.length    // 2

  //contains 表示往类名列表中是否包含该类名。有点对应jQuery中的hasClass方法
   document.body.classList.contains("c");
   if(document.body.classList.contains("c")){
       alert(1)
   }
    document.body.classList.toString() === document.body.className; // true

    //此处调用的toString方法
    console.log("className属性："+document.body.classList);
    console.log("属性中的类名："+document.body.classList.toString());

   //classList扩展
    console.log(typeof classList);
    DOMTokenList.prototype.adds = function(tokens) {
        tokens.split(" ").forEach(function(token) {
            this.add(token);
        }.bind(this));
        return this;
    };

    // 看看能不能添加多个属性
    var clList = document.body.classList;
    clList.adds("child1 child2 child3").toString(); // "a b  child1 child2 child3"

</script>
</html>