Output: "sidebaritem widget_tag_cloud"
Now, that wasn’t so hard. Lets take a look at a performance test: jQuery versus getting a className.
Here is the setup for the test
Here are the tests:
1. jQuery - get Element + get Class $("#getMe").attr('class'); 2. GET DOM ELEM + get Class document.getElementById("getMe").className; 3. jQuery get Class jElem.attr('class'); 4. DOM get class dElem.className;
Chrome 11 Results
In Chrome using a cached element, getting the classname is 48x faster than using jQuery.
In Chrome getting the element and then getting the classname is 25x faster than using jQuery.
FF 4.0 Results
In FF using a cached element, getting the classname is 65x faster than using jQuery.
In FF getting the element and then getting the classname is 83x faster than using jQuery.
Safari 5.0 Results
In Safari using a cached element, getting the classname is 30x faster than using jQuery.
In Safari getting the element and then getting the classname is 35x faster than using jQuery.
Whenever possible, using the browsers built in methods will always be faster, and just because you have a library available doesn’t mean you should be using it for every DOM query. The speed advantage alone should dictate which methods of the library you are using and when.