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.

Answer 1

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().

Answer 2

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/