Document.Getelementbyid VS Jquery $()

document.getElementById vs jQuery $()

Not exactly!!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

---

In jQuery, to get the same result as document.getElementById, you can access the jQuery Object and get the first element in the object (Remember JavaScript objects act similar to associative arrays).

var contents = $('#contents')[0]; //returns a HTML DOM Object

jQuery $() vs. document.getElementByID -- differences

The argument to "$()" has to be a selector:

var $thing = $("#" + thingId);

That's almost the same as calling "getElementById()". The difference is that the latter will only care about "id" values (except in IE, see below), while the jQuery selector-based code will pay attention to embedded CSS metacharacters. Thus, if you've got an "id" value with a "." in it, like this:

var foo = $('#thing.special');

then that will look for an element with id "thing" and class "special", instead of an element with the id "thing.special".

The thing with IE: for reasons known only to some mysterious developers at Microsoft, the "getElementById()" code in IE will return elements whose "name" attribute matches the argument. That behavior is not dependent on the presence of an element with the same "id" value; I think it returns the first one it finds in the DOM. (I don't know about IE9 in this regard.)

Note — a comment mentions correctly that the "$()" function can take a variety of different types of arguments, resulting in a variety of effects. When I said it "has to be a selector", I was referring to its use with string-valued arguments.

Difference between getElementById and jquery $('#smth')

document.getElementById returns a DOM object. This is the browser's native way of thinking about an element in the page. It has various methods and properties. These can be a little clunky to use.

The jQuery object (created by the $ method) is a wrapper around a DOM element or a set of DOM elements. The normal properties and methods are not available; you get a selection of different methods that make the process of DOM manipulation more intuitive.

The difference is more clear to see with multiple elements in the selection (as you would get with a class selector $('.someClass') for instance, but the methods on a jQuery selection are different to the ones on a native DOM element. They point to the same thing, but they are different ways of thinking about it and dealing with it.

---

As a final note, you can convert a jQuery selection into its native DOM element(s) with the get method (edit: or the alternative array-like syntax). So

document.getElementById('theID')

is exactly the same as

$('#theID').get(0) // or $('#theId')[0]

Note, however, that you should use the first, as it has much better performance. Only use jQuery if you need the extra functionality it provides.

what's the difference between $('#') and document.getElementById()?

getElementById returns a DOM element object.

$ returns a jQuery object. Passing it a string containing an id selector causes it to populate the jQuery object with a DOM element object.

val is a jQuery method, not a DOM element method.

Doesn't jQuery('#id') do the same thing as document.getElementById('#id') in javascript?

Regarding selecting the element, yes, but jQuery selectors return jQuery objects and getElementById returns a DOM Element object, you can get the DOM Element using [index] or get(index) method:

chgJobstatus(jQuery('#chgStatus')[0]);

jQuery equivalent of document.getElementById

As @undefined pointed in a comment above, the correct answer is:

var target = $("#myID").get(0);

Why Jquery $(#); doesn't work but Javascript document.getElementById works fine?

$("#name") return a jQuery object not an Element object like document.getElementById("pictures"); to return a Element object you need to get the Element object from the jQuery object

$("#name")[0]

jquery, performance-wise what is faster getElementById or jquery selector?

If you are concerned about performance, native getElementById is much much faster, but jQuery gives you very handy access to a lot of stuff. So, you might want to use something like :

$( document.getElementById("some_id") ).jQueryCall();

This will give you a better performance, and at the same time, allow you to use jQuery.

---

Related Topics