First time here? You are looking at the most recent posts. You may also want to check out older archives or the tag cloud. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS. Thank you for visiting! (hide this)

Lately I've been playing a bit with jQuery, one of the raising javascript frameworks and I found out something I was not expecting to find.

But let's step back a bit: in jQuery the dollar sign function $ is a shortcut for the main function of the framework which is used to select html elements in the page. This $ method accepts a css-like selector as argument, so if you want to select a specific element by its id you have to use the hash: $("#myElementId") returns a reference to the DOM element boosted by jQuery. We can say it's a shortcut to the usual way of getting a DOM element document.getElementById("myElementId").

With this idea in mind, thinking that jQuery added its goodness to the standard DOM Element via extension methods, and after reading on the docs that when called with the id selector the jQuery method returned a DOM Element, I was expecting to get a reference to the real DOM element. So I passed it to an ASP.NET Javascript function and it complained that the DOM element didn't have a style property. Where was I wrong?

It took me a while to understand why I was wrong: the $ method gives a jQuery object that is always an array of Elements, even if the docs say otherwise.

dollarsign-vs-getelementbyid.jpg

So to the get the real DOM element you have to use $("#myElementId")[0] or the more friendly $("#myElementId").get(0)

jquery-element-array-zero.jpg

So, just to wrap up, $("#elementId") != document.getElementById("elementId"). And comparing to the ASP.NET Ajax Library, it is also different from the $get("elementId") which is exactly the same as doing the getElementById the old way.

It took me a whole afternoon to understand this... I hope this post will save you 4 hours of your time as well.

posted on Friday, April 11, 2008 11:25 PM

Comments on this entry:

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Jake Scott at 4/12/2008 5:05 AM

I recommend you read (if you havn't already) Manning jQuery in Action, its the best book on Javascript ever :)

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Simone at 4/12/2008 11:38 AM

Thank you
I'll have a look...
Probably it's the best book on jQuery ever, not on javascript as whole since jQuery hides the standard DOM.

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Dalton at 4/12/2008 3:51 PM

I think you didn't read the docs carefully enough. If you look at the API/1.2/Selectors page and scan to the right of each entry, you will see a specified return value. They all say Array<Element> or Array<Element(s)>.

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Karl Swedberg at 4/12/2008 6:11 PM

Hi Simone (and Dalton),
Based on your feedback in this entry, I updated the Selectors page last night to show what I hope are clearer return values: Array<Element> and Array<Element(s)>. The documentation site is a wiki, so feel free to edit it if you see anything else that could be improved.

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Simone at 4/12/2008 9:20 PM

@dalton, before Karl intervention it was Element :)

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Gordon at 4/12/2008 10:01 PM

You might not be aware, but $get() from ASP.NET is NOT the same as document.getElementById()

More to the point, you need to be aware that Microsoft broke the spec in their implementation of document.getElementById() and thus you either need to be very careful when using it (or a library that calls is), or patch it so that the bugs are fixed in your JavaScript.

Check out the full bug write up here:
http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html

and if you are looking for the full patch, see workaround code example #3.

Thanks
Gordon

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Simone at 4/13/2008 12:58 AM

@gordon:
if you look at the code of asp.net ajax lib you'll find that @get is

function get(id, element) {
// validation code that was removed

if (!element) return document.getElementById(id);
if (element.getElementById) return element.getElementById(id);

// manual DOM walk that was removed ...
}

More on this: http://mattberseth.com/.../the_everuseful_get_and_find_as.html

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by gianluca gravina at 4/14/2008 11:00 PM

Creepy, didn't noticed and quite confusing indeed ...

Well, just a notice in order to not increase confusing docs ;)

You said in your post:

So to the get the real DOM element you have to use $("myElementId")[0] or the more friendly $("myElementId").get(0)

Well, U you miss a "#" in the selectors syntax :)

Cheers

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Simone at 4/14/2008 11:08 PM

Good catch Gianluca, thanx for that

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Eddy Young at 4/16/2008 4:10 PM

Unrecognisable IDE. Which one is it?

Eddy.

# re: Beware the $(...) in jQuery: $("#elementId") != document.getElementById("elementId")

Left by Simone at 4/16/2008 4:16 PM

It's the script debuggin window of FireBug
http://www.getfirebug.com/

Comments have been closed on this topic.