title: Javascript InvalidCharacterError when modifying a css name with a space
body: <p>I'm modifying some buttons that are dynamically generated through JavaScript. I have no control over statically declaring the class names which is why I've written a function to do it for me on page load. I understand why it's happening (it doesn't like the space in 'zocial button'), I just need a fix and I'm definitely not that gifted with JavaScript. Here's the error if you inspect the button on the page:
  Unncaught InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('zocial facebook') contains HTML space characters, which are not valid in tokens.
  Here's my javascript code:</p>
  
  <pre><code>var buttonz = document.getElementsByName('provider');
  for (var i = 0, length = buttonz.length; i &lt; length; i++) {
      if (buttonz[i].value == 'Facebook')
      {
          buttonz[i].classList.remove('btn-default');
          buttonz[i].classList.add('zocial button');
      }
  </code></pre>
  
  <p>If you want to see it live here you go:
  <a href="http://jsbin.com/nifuxoyo/1/watch" rel="noreferrer">http://jsbin.com/nifuxoyo/1/watch</a></p>