But what about jQuery?
There is no doubt that the jQuery methods hasClass(), addClass(), removeClass() and toggleClass() are all fantastic, but there ain’t nothin’ goin’ on under the hood that you can’t do yourself. And what is under the hood is tedious stuff like this:
if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 )
The length Property
Even though the element.classList object is not an array, it is “array-like” in that it has a “length” property, and each CSS class name is represented by a numerically indexed property whose value is the name of that class (a string). This is super-helpful if you want to enumerate the classes that are members of this object. You could certainly grab an individual member’s value using bracket-notation: element.classList, a “for” loop, or the item() method, which is discussed next.
Here is the JsFiddle.net link for the classList object’s “length” property : http://jsfiddle.net/BmFZc/
The item() Method
The item() method allows you to reference a specific class name in the collection of class names. When you pass an integer to this method, it returns a string representation of the class name that matches that index. So keep in mind that this collection is zero-based. In the first JsFiddle link below, we manually reference a number of classes in the class list, using the item() method. In the second JsFiddle link below, we use a “for” loop to accomplish the same task.
Here is the JsFiddle.net link for the item() method: http://jsfiddle.net/N88x9/
Here is a second JsFiddle.net link for the item() method: http://jsfiddle.net/WE7gc/
The add() method
As you might expect, the add() method adds a class to the element’s class list. In the JsFiddle link below, you can see that the class “bar” is added to the element’s class list because the element’s appearance changes dramatically, as per the CSS that is specified.
Here is the JsFiddle.net link for the add() method: http://jsfiddle.net/uzMAx/
The remove() Method
In the manner opposite to the add() method, the remove() method removes the specified class from the element’s class list. Much like the example for the add() method, you can see that the class “bar” is removed from the element’s class list because the element’s appearance changes dramatically, as per the CSS that is specified.
Here is the JsFiddle.net link for the remove() method: http://jsfiddle.net/4h7m4/
The toggle() Method
The toggle() method will check to see if the element already has the specified class. If not, then it adds the class. If it does have the class, then it removes it. Depending on the scenario, this can minimize redundant code.
Here is the JsFiddle.net link for the toggle() method: http://jsfiddle.net/wWfNf/
The contains() Method
You can check to see if an element already has a class by using the contains() method. When you pass it a string name representing the class that you would like to check for, it returns true or false, indicating whether or not the element has the class you provided.
Here is the JsFiddle.net link for the contains() method: http://jsfiddle.net/wWfNf/
The toString() Method
The toString() Method simply returns a space-separated list of the classes that are applied to that element.
Here is the JsFiddle.net link for the toString() method: http://jsfiddle.net/GqzD5/