HTML5 classList API

Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: When are browser vendors going to see the helper methods/libraries created by the JavaScript toolkits and implement these functionalities natively within the browser? I realize that standards are important and browser vendors can't afford to half-ass these implementations but I do believe they could be...expedited.  The good news is that one of these functionalities has been add to the HTML5 API; classList.

The classList object, added to all nodes within the DOM, provides developers methods by which to add, remove, and toggle CSS classes on a node.  classList also allows developers to check if a CSS class has been assigned to a given node.

node.classList

copy{
  length: {number}, /* # of class on this element */
  add: function() { [native code] },
  contains: function() { [native code] },
  item: function() { [native code] }, /* by index */
  remove: function() { [native code] },
  toggle: function() { [native code] }
}

node.classList, as you can see, is a small but useful collection of methods.

Adding a CSS Class

copymyDiv.classList.add('myCssClass');

Removing a CSS Class

copymyDiv.classList.remove('myCssClass');

Toggling a CSS Class

copymyDiv.classList.toggle('myCssClass'); //now it's added
myDiv.classList.toggle('myCssClass'); //now it's removed

Note: If toggle is called and the element does not have the provided CSS class, the class is added.

Contains CSS Class Check

copymyDiv.classList.contains('myCssClass'); //returns true or false

Mozilla Firefox is the only browser that currently supports the classList API.  As more browsers add classList support, look for the JavaScript libraries to include classList checks instead of parsing an element's class attribute!