javascript - chaining HTML5 classList API without (Jquery)

Question

Is there a way to chain HTML5 classList API chaining?.

this will not work

var sidebar = document.querySelector("#sidebar");

sidebar.classList.toggle("active").classList.remove("hover")

while this will work

var sidebar = document.querySelector("#sidebar");

sidebar.classList.toggle("active"); 
sidebar.classList.remove("hover")

NOTE: NO jquery please

Answer 1

You can create chainability via a little object with chainable methods:

function classList(elt) {
  var list = elt.classList;

  return {
      toggle: function(c) { list.toggle(c); return this; },
      add:    function(c) { list.add   (c); return this; },
      remove: function(c) { list.remove(c); return this; }
  };

}

Then you can chain to your heart's content:

classList(elt).remove('foo').add('bar').toggle('baz')