原生js之classList 增加、移除指定类

jQuery中的removeClass() 方法，移除指定类的确很方便，但是它是jQuery中的方法，原生dom是不能直接使用的。

在项目中本来用的jq获取dom，但是在for循环中动态生成div，还要抓取到第i个dom，给div加固定id的话肯定不行，所以给他加了className，然后通过i，抓取第i个div。 

$("test")[i].removeClass("class1");

以上代码，会报错 removeClass（）不是一个function;


因为$("test")[i] 是原生dom，不能使用jQuery的方法；


第一种解决方法：


jq对象加了下标，就变成js对象，在转jq对象，才能用remove Class();

在把dom对象转换成jq对象，此处略；


第二种方法：使用原生的方法


  • 获取dom节点
    • 

    var oThisDiv = document.getElementsByClassName("test")[i];
// 或者
var oThisDiv = $("test")[i]；

    使用classList下的add/remove/contains等方法
    

  • 添加class
    • 

    oThisDiv.classList.add("myClass");
    

  • 添加多个class
    • 

    oThisDiv.classList.add("myClass1"，"myClass2", ...., "myClassN");
    

  • 移除class
    • 

    oThisDiv.classList.remove("myClass");
    

  • 移除多个class
    • 

    oThisDiv.classList.remove("myClass1"，"myClass2", ...., "myClassN");
    

  • 检查是否含有指定类
    • 

    oThisDiv.classList.contains("myClass1");