Querying it jQuery way: getElementsByClass
July 7, 2008
Post has been moved to our New Blog. http://blog.webscale.co.in/?p=27
Entry Filed under: Web 2.0, performance. Tags: getElementByClass, getElementByClassName, getElementsByClass, getElementsByClassName, javascript, jquery.
8 Comments Add your own
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed
1.
Chris Heilmann | July 7, 2008 at 12:54 pm
Hmm why not….
window.onload = function(){
document.body.className = 'jsenabled';
}
and in your CSS:
body.jsenabled .triggerClass {
position:absolute;
left:-4000px;
/* or any other – screenreader friendly hiding method */
}
You will never be as fast as the CSS parser.
Furthermore, if you write a getElementsByClassName these days, check that it doesn’t exist natively, as a lot of browsers support this now.
2.
George | July 7, 2008 at 1:15 pm
How about:
$("#mainDiv div.xyzClass").hide();jQuery accepts any css selector as it’s argument. No need to filter. And it has a built in method for hiding elements.
3.
Chris Heilmann | July 7, 2008 at 1:45 pm
George, under the hood this is still a loop (or on Firefox one native call and then a loop).
4.
kentaromiura | July 7, 2008 at 2:54 pm
document.evaluate is way faster..
see
http://mykenta.blogspot.com/2007/10/getelementbyclass-revisited.html
or
http://www.devpro.it/code/133.html
for a crosslibrary function.
5.
abhishekhurana | July 7, 2008 at 3:31 pm
@Chris
I didn’t mentioned it uprightly, though I did took the worst case scenario and built my write up over it to talk abt doing it using css selectors (given by jquery). I should elaborate more on how jquery is doing it by as well falling back on xpath (to use document.evaluate) or regex match.
Your approach of css selectors looks a better one, only if it works for me. Nevertheless it comes with its own tradeoff. What if I need to arrive to a class name only thru some conditional checks. Then I may again end up adding class to elements (by iterating)
The reason for providing the implementation suggests that this is not a native method but one can add to the DOM.
Prototype does that as well, but thats been deprecated.
Safari 3.1 has a native support for this method, suit follwed by FF3 n Opera 9.5, but can’t say how quickly we move our apps to these new versions? IE is still far from it.
@George
The optimization looks good. It works.
@kentaromiura
As for document.evaluate, does IE support it? FF2, FF3 & Opera 9.27 does, not sure of other versions.
6.
kentaromiura | July 7, 2008 at 3:54 pm
If you look at my implementation i check if the browser support evaluate, otherwise it will fallback to the standard way of doing this using a standard way of iterating throught the dom,
i think jquery will use a simil approach under the hood, what it make a doubt in your method is that you’re chaining togever quite lot of methods.
I see lots of map and filter, and everyone of this method iterate a collection.
7.
abhishekhurana | July 7, 2008 at 4:13 pm
you are right…plz see George comments for a better impl. I was not aware of jquery accepting css selector arguments.
8.
abhishekhurana | October 6, 2008 at 6:59 am
jQuery Cheat Sheet
http://www.cheat-sheets.org/saved-copy/Jquery-Cheat-Sheet-1.2.pdf