将一个类添加到div后DOM没有更新？

我正在尝试编写一个程序来收集a中的所有类名div,将它们存储在一个array并将它们全部推回到DOM,blue最后调用一个类,这就是HTML:

  
  
  



    

    click

问题是,我知道如何获取内部的所有类名div,甚至如何在该div中推送blue(btn点击)以及我收集的其他值,但为什么不出现蓝框？我错过了什么？

var domManipulation = function(){
      var box = document.querySelector('#box');
      var btn = document.querySelector('#btn');
      var class_list = [];

      if(box.classList.length > 0){
        for(var i = 0; i < box.classList.length; i++){
          class_list.push(box.classList[i]);
        }
      }

      btn.addEventListener('click', function(){
          class_list.push("blue");
          box.classList.add(class_list);
          console.log(class_list);
      });

 }();

这是一个JsBin,我不能使用jQuery btw.

这就是问题:

box.classList.add(class_list);

您无法添加完整的类数组,因为它们最终以逗号分隔.

var domManipulation = function() {
  var box = document.querySelector('#box');
  var btn = document.querySelector('#btn');
  var class_list = [];

  if (box.classList.length > 0) {
    for (var i = 0; i < box.classList.length; i++) {
      class_list.push(box.classList[i]);
    }
  }

  btn.addEventListener('click', function() {
    class_list.push("blue");
    class_list.forEach(function(e){
      box.classList.add(e);
    })
    console.log(class_list);
  });

}();

#box {height: 50px; background: #eee}
#box.blue {background: blue}

click