document.getElementById() vs $()

Question

Possible Duplicate:
document.getElementById vs jQuery

I am learning jQuery and javascript.

I wonder why the $() function of jQuery does not replace the document.getElementById() function of javascript.
Isn't it the role of $() ?
If not, what's the role of $() ?

I got to this question because $().outerHeight doesn't work.

Thank you.

`$()` can be used instead of `getElementById()` because it supports `#id` selectors. — Frédéric Hamidi, Nov 01 '12 at 18:15
here is the answer. no need to write it again : http://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery — Mustafa Genç, Nov 01 '12 at 18:15
Why would you want to **replace** `document.getElementById()`? Never replace native methods unless you really know what you do (sometimes you cannot even replace them). And strictly speaking, `getElementById` is not a JavaScript method in the sense of being part of JavaScript. It's method of the DOM API implemented in JavaScript (but that's probably nit pick ;)). — Felix Kling, Nov 01 '12 at 18:19

score 2 · Accepted Answer · answered Nov 01 '12 at 18:16

$ accepts selectors, HTML strings and regular JS objects. getElementById only accepts the id attribute of an element. They do different things.

You're trying to access a DOM object property, but from a jQuery object. jQuery objects wrap DOM objects, but they don't replace them.

To access the DOM object, you can use $(...)[0] (or $(...).get(0)) and your code should work just fine:

$(...)[0].outerHeight

score 1 · Answer 2 · answered Nov 01 '12 at 18:17

1) $() is the way you access any element in jQuery.

You can use any other keyword instead of $ by:

var jq = jQuery.noConflict();

When you execute the above command, the element accessor becomes jq().

2) $() does not really replaces document.getElementById(). But yes $('#'+id) replaces it. Since $('.'+class) also works, which is not a primitive property of DOM, I would just say it again $() is the way you access any element in jQuery.

score 0 · Answer 3 · answered Nov 01 '12 at 18:16

First of $ is just used a select in jquery basically select(something) and something can be a class, id, html tag etc.

Hence the $ is not used just for selecting id

And this is the current syntax for using outerHeight http://api.jquery.com/outerHeight/

score 0 · Answer 4 · answered Nov 01 '12 at 18:16

$() is invoking the jQuery function with a parameter. The parameter is a selector, which does not have to be an ID. Selectors select by DOM tree path, by class, by attribute, by ID, by tag name, etc. So the jQuery function is in no way equivalent to document.getElementById().

Further more the jQuery function always returns a jQuery object, which the document.getElementById() returns a DOM element or null.

For outerHeight in jQuery you can use:

$('#Id').outerHeight(true); // Outer height with margins
$('#Id').outerHeight(); // Outer height without margins

document.getElementById() vs $()

4 Answers4