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
{
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
myDiv.classList.add('myCssClass');
Removing a CSS Class
myDiv.classList.remove('myCssClass');
Toggling a CSS Class
myDiv.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
myDiv.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!
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
I feel it’s going to be a standard that won’t be implemented for a long time to come across all vendors, but it is certainly worth the wait. And at least we have libraries to fall back on for the moment.
Just wish that there was one JavaScript engine and all used it. Only in a perfect world I guess, and that would also apply for CSS(3) etc.
@Alex Hall: I hope that’s not the case — seems *very* easy to implement.
@Alex Hall:
I wish there was one browser and all used it. That’d be bliss! :)
It’s a step forward, but I prefer Mootools’ Element.addClass over Element.classList.add
@Jani Peltoniemi: I do too, but MooTools could (and probably will, once more browsers implement classList) use these native methods to more quickly add/remove/toggle classes.
very good! Has now come true?
Feature test for HTML5 classList:
if (!!document.createElement('p').classList) {// native classList support
};