原生js给DOM元素添加一个或者多个类的方法总结

先看两个例子：

html:

 
 

   
   

    
    

   
   
   
   

    
    

     
     <div 
     
     class=
     
     "test" id=
     
     "test">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
      啦啦啦
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <
     
     /div>
    
    
   
   
 
 

css：

 
 

   
   

    
    

   
   
   
   

    
    

     
     .test{
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     width: 
     
     100px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     height: 
     
     100px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     background: 
     
     #B6BAC4;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .test1{
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     border: 
     
     1px solid;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     width: 
     
     200px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     border-radius: 
     
     4px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .test2{
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     margin: 
     
     0 auto;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .test3{
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     font-size: 
     
     50px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

js:

 
 

   
   

    
    

   
   
   
   

    
    

     
     // 覆盖原来的样式
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     document.getElementById(
     
     "test").setAttribute(
     
     "class",
     
     "test1");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     var dom=
     
     document.getElementsByClassName(
     
     "test")[
     
     0].setAttribute(
     
     "class",
     
     "test1");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     // 追加样式不覆盖原来的样式
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     document.getElementById(
     
     "test").classList.add(
     
     "test1");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     document.getElementById(
     
     "test").classList.add(
     
     "test1",
     
     "test2",
     
     "test3");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     var dom=
     
     document.getElementsByClassName(
     
     "test")[
     
     0].classList.add(
     
     "test1");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     var dom=
     
     document.getElementsByClassName(
     
     "test")[
     
     0].classList.add(
     
     "test1",
     
     "test2",
     
     "test3");
    
    
   
   
 
 

效果：

覆盖：

不覆盖：

追加多个样式：

注意所有的都必须要在DOM获取到的前提下用

其次：再用类名获取DOM的时候会报错：

常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

原因：document.getElementsByClassName(...)捕捉到的是该类名元素的数组
正确的访问方式应该是：
document.getElementsByClassName(...)[0].addEventListener...
使用遍历为每个class添加监听：
var classObj = document.getElementsByClassName(...);
for(i=0;i<classObj.length;i++){
classObj[i].addEventListener...
}

所以在后面加上数组的下标确定是该类名的哪一个类名下追加或者替换

移出一个

dom.classList.remove("className1");
  
  

移除多个类:

   
   

     
     

      
      

     
     
     
     

      
      

       
       dom.classList.
       
       remove(
       
       "className1", 
       
       "className2", 
       
       "className3", 
       
       ..
       
       ..., 
       
       "classNameN");
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     
   
   

检查是否含有某个类

dom.classList.contains('className'); //return true or false
   
   

一个综合应用就是给一组类名相同的DOM追加一个或多个相同的样式

html:

<ul>
    <li class="test" id="1" >111</li>
    <li class="test" id="2" >111</li>
    <li class="test" id="3" >111</li>
    <li class="test" id="4" >111</li>
</ul>

css:

.test{
  width: 100px;
  height: 100px;
  background: #B6BAC4;
}
.test1{
  border: 1px solid;
  width: 200px;
  border-radius: 4px;
}
.test2{
  margin: 0 auto;
}
.test3{
  font-size: 50px;
}

js:

 var dom=document.getElementsByClassName("test");
for(var i=0;i<dom.length;i++){
    dom[i].classList.add("test1");
}

效果：