Q:

can't select all elements with classList API

I'm having a problem selecting all the LI tags when converting jQuery code to HTML5 javascript
code. I have applied the click event to the parent UL, and the click event is being applied to the correct clicked target LI. The class "selected" is also being applied. The problem is that I need all classes to be cleared from the LI tags before the "selected" class is applied, as I only want it applied to the current event target. In jQuery it is simply a matter of removing classes from the LI's, but I am having problems targeting all the LI tags and removing the class in javascript. I suspect the problem is how I am iterating over the node list returned from QuerySelectorAll. I have also tried amongst other things, document.GetElementsByTagName, and iterating over these. 
I am getting an "Uncaught TypeError: Cannot read property 'contains' of undefined" on the myFunc function.
I would be very happy if someone could point out my error. 
<div id='button'></div>
 <ul id='swatches'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>

The jQuery code
$('li').on('click', function(){
 $('li').removeClass('selected');
 $(this).toggleClass('selected');
});

Using the classList API
var swatch = document.getElementById('swatches'),
$li = document.querySelectorAll('#swatches li');

swatch.addEventListener('click', myFunc, false);

function myFunc(e){
  var target = e.target;

  for(var i=0; i<$li.length; i++){
   if($li.classList.contains('selected')){
   $li.classList.remove('selected');
  }
} 
if(target.nodeName.toLowerCase() === 'li'){
 e.target.classList.toggle('selected');
}

}

A:

I suspect the problem is how I am iterating over the node list returned from QuerySelectorAll.

Yes. You forget the indices. It should be
for (var i=0; i<$li.length; i++)
    if ($li[i].classList.contains('selected'))
//         ^^^
        $li[i].classList.remove('selected');
//         ^^^

However, two points:

You don't need to test for contains() before calling remove() unless you need the information explicitly. Trying to remove a class that doesn't exist just does nothing.
You might not need to iterate the whole $li collection on every click. Since there is only one <li> with the .selected class at a time, you might simply store a reference to the currently-selected element, or use
var cur = swatch.querySelector("li.selected");
if (cur) cur.classList.remove('selected');

(which could work with an id as well).

