Comments on: Querying it jQuery way: getElementsByClass

By: abhishekhurana

abhishekhurana — Mon, 06 Oct 2008 06:59:31 +0000

jQuery Cheat Sheet
http://www.cheat-sheets.org/saved-copy/Jquery-Cheat-Sheet-1.2.pdf

By: abhishekhurana

abhishekhurana — Mon, 07 Jul 2008 16:13:43 +0000

you are right…plz see George comments for a better impl. I was not aware of jquery accepting css selector arguments.

By: kentaromiura

kentaromiura — Mon, 07 Jul 2008 15:54:49 +0000

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.

By: abhishekhurana

abhishekhurana — Mon, 07 Jul 2008 15:31:10 +0000

@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.

By: kentaromiura

kentaromiura — Mon, 07 Jul 2008 14:54:26 +0000

document.evaluate is way faster..

see

http://mykenta.blogspot.com/2007/10/getelementbyclass-revisited.html

http://www.devpro.it/code/133.html

for a crosslibrary function.

By: Chris Heilmann

Chris Heilmann — Mon, 07 Jul 2008 13:45:54 +0000

George, under the hood this is still a loop (or on Firefox one native call and then a loop).

By: George

George — Mon, 07 Jul 2008 13:15:14 +0000

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.

By: Chris Heilmann

Chris Heilmann — Mon, 07 Jul 2008 12:54:42 +0000

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.