jquery.classList
jquery.classList copied to clipboard
Re-implementation of jQuery class manipulation methods that utilizes the classList interface.
jQuery classList plugin
Re-implementation of jQuery class manipulation methods that utilizes the classList interface.
Compatible with jQuery 1.9+.
Rationale
The DOM spec defines the classList interface, allowing for adding/removing/toggling classes or checking if an element contains a specified class using built-in methods as opposed to manually parsing the className field where classes are separated by spaces.
A couple of test suites comparing both implementations:
- https://jsperf.com/classlist-v-old-way/18 - small (10) number of classes
- https://jsperf.com/classlist-v-old-way/19 - large (100) number of classes
jQuery currently doesn't utilize this interface, one of the reasons being it's not supported by Internet Explorer 9 and it doesn't work on SVGs even in IE 11.
Browser support
Note: in browsers that don't fully support the classList interface (e.g. all IE & Android Browser) the plugin falls back to the built-in jQuery implementation so it doesn't break them.
The following browsers can utilize full functionality of this plugin:
- Chrome (for desktop & Android), Edge, Firefox, Opera: Current -1, Current
- Safari 7.0+
- iOS 7.0+
"Current -1, Current" denotes that the current stable version of the browser and the version that preceded it are supported. For example, if the current version of a browser is 24.x, we support the 24.x and 23.x versions.
In fact the code will work in many older versions, too, but they are not actively tested.
Caveats
Supported browsers with the jQuery classList plugin pass the whole jQuery test suite with a few minor exceptions:
- A few tests that check for extra whitespaces in the
classattribute or the presence of theclassattribute are failing. This is mostly because in Safari up to version 9.x and in current Firefox & Chrome (at the time of writing this section)classListupdate steps are not performed correctly and there is no way to control that behavior via theclassListinterface. Relevant bug reports:- Chrome: https://crbug.com/600964
- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=869788
- In Safari 7 passing the same class to
classList.addin multiple parameters results in duplicated class names in theclassattribute which makes another few tests fail. However,classList.removeremoves all duplicated classes so this shouldn't be a problem unless you're parsing theclassNameattribute directly by yourself. This has been fixed in Safari 8.