What does $(selector)[0] mean in jQuery?

Question

The syntax that I don't understand is this:

$("#profilePhotoFileUpload")[0]

I have been seeing this syntax pretty frequently and I've ignored it for a while because I never had to use it. But now, in order to understand the code from this post How do I upload an image using the Parse.com javascriptSDK?, I cannot ignore it any longer.

I know that [0] this syntax is used to refer to an array usually. But it seems a little weird that a reference to an id would generate an array of some sort.

It accesses the DOM element directly, without the jQuery wrapper. — Blender, Sep 25 '15 at 13:59
Next to that, this function is able to handle classes and IDs, and as such can result in either an array of elements, or one element. Because it is against every convention to have one function with multiple return types, it will always return an array as an array can also contain only one match. — Stephan Bijzitter, Sep 25 '15 at 14:00
[Closely related to](http://stackoverflow.com/questions/1302428/what-does-jquery-actually-return) — Jashwant, Sep 25 '15 at 14:05
In relation to your (now deleted) paragraph, we discourage members from deleting questions here that they have asked. A major point of Stack Overflow is to ask questions that other people can learn from. So, if you have a question that you wish to later delete, it cannot be asked here. — halfer, Oct 01 '15 at 12:15

Tushar · Accepted Answer · 2015-09-25T14:16:54.027

21

By appending [0] to the jQuery object will return the first DOM element.

As you're using id selector here, there will be only one element in the array so using [0] makes sense. If you are selecting multiple elements you can also use any number which is between 0 and number of elements you can get corresponding DOM element.

From jQuery Docs

A jQuery object contains a collection of Document Object Model (DOM) elements that have been created from an HTML string or selected from a document. Since jQuery methods often use CSS selectors to match elements from a document, the set of elements in a jQuery object is often called a set of "matched elements" or "selected elements".

The jQuery object itself behaves much like an array; it has a length property and the elements in the object can be accessed by their numeric indices [0] to [length-1]. Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such as join().

edited Sep 25 '15 at 14:16

answered Sep 25 '15 at 13:58

Tushar

85,780
21
159
179

I see... so `[0]` is not representative of an array or anything like that. – Jae Kim Sep 25 '15 at 14:00
2

Should say will return the ***first*** element in collection – charlietfl Sep 25 '15 at 14:01
1

@JaeKim: correct. Bracket notation can be used with any object. All that does is accessing the property `0` of that object. Example: `({0: 42}[0])` returns 42. – Felix Kling Sep 25 '15 at 14:06
1

@Jae, [.get()](https://api.jquery.com/get/) is used for the same. But that involves a function overhead, and should be avoided. – Jashwant Sep 25 '15 at 14:06
Thank you all for your responses! – Jae Kim Sep 26 '15 at 02:20
@JaeKim Actually the `[0]` is representing the index position in the returned array. The jQuery function you're referring to returns an array containing all of the elements that match the given selector. In your case, this is an array of only one element. But if you're finding a class for example, the array will return with all matching items in that class. So e.g. `jQuery('.imapsMapPolygon')[4];` could be a valid element coming from the array. – Omar Shishani Sep 28 '22 at 16:49

Aung Myo Linn · Answer 2 · 2017-12-10T16:09:22.917

Well, don't confuse jQuery Object with DOM node/element.

this should be as simple as

$(this)[0] === this

and

$("#target")[0] === document.getElementById("target");

e.g.

// Setting the inner HTML with jQuery.     
var target = document.getElementById("target");     

// Comparing DOM elements.
alert($(target)[0] === target); // alerts "true"

// Comparing DOM element and jQuery element
alert($(target)[0] === $(target).eq(0)); // alerts "false"

We must keep in mind that both $(target)[0] and $(target).get(0) return the same DOM element which has DOM properties like .innerHTML and methods like .appendChild(), but not jQuery methods like .html() or .after() whereas $(target).eq(0) returns a jQuery object which has useful methods like .html() and .after().

what's more

var logo1 = $("#logo");
var logo1Elem = logo1.get(0);

var logo2 = $("#logo");
var logo2Elem = $("#logo")[0];

Although logo1 and logo2 are created in the same way (and wrap the same DOM element), they are not the same object.

// Comparing jQuery objects. 
alert($("#logo") === $("#logo")); // alerts "false"

// Comparing DOM elements.     
alert(logo1Elem === logo2Elem); // alerts "true"

Ref: https://learn.jquery.com/using-jquery-core/jquery-object/

rphuber · Answer 3 · 2015-09-25T14:10:21.227

According to the jQuery documentation the $() returns a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string. By adding the [0] you take the collection wrapper off the element and just return the actual DOM element when dealing with an id. When dealing with a class you would return the element at the arrays position passed in through the bracket notation (in this case the first, since arrays are 0 based in JavaScript).

score -2 · Answer 4 · edited Sep 25 '15 at 15:04

-2

In the case of an id selector, appending [0] to it has no sense because $("#theIdOfTheElement") will always return the first element.

edited Sep 25 '15 at 15:04

Steve

11,696
7
43
81

answered Sep 25 '15 at 14:45

Zakaria Ra

1
2

4

wrong. Just because the standard says you cant have multiple elements with the same ID does not mean the browser will panic about it. In fact most browsers I know will allow such action and id selector could return multiple elements – Steve Sep 25 '15 at 15:03
jquery uses document.getElementById(id) (see : https://api.jquery.com/id-selector/) that returns a reference to the element (the first one in case you have multiple elements with the same id) (see : https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) see also : http://stackoverflow.com/questions/14408891/getelementbyid-multiple-ids – Zakaria Ra Sep 28 '15 at 14:45

What does $(selector)[0] mean in jQuery?

4 Answers4

Linked

Related