JQuery ID Selector -what's this behaviour

Question

According to jQuery documentation

ID Selector

Description: Selects a single element with the given id attribute.

When you have this markup

<div id="mydiv"></div>

And you do

alert($('#mydiv')); // displays "[Object]"

alert($('#mydiv')[0]); // displays "[HTMLDivElement]"

Since we expect 1 element, what is the explanation for the array notation? What makes the two different?

NOTE: Am more concerned about why we have array/collection of DIV when we only expected one.

Is [Object] = Array {HTMLDivElement}. What is the structure of [Object]?

In most of the jQuery documentation for most selector methods you read something similar to: `Accepts a string which is used to match a set of elements.` As your selectors could always return 0, 1 or more elements it makes only sense to always return a collection. The collection is a jQuery object, containing the actual references to the DOM elements. As such to get access to the DOM reference you can use `jQueryObject[0]`. Even if 0 elements are matched, by returning a 0 length array you don't get exceptions blowing up when chaining i.e: `$('#mydiv').hide()`. — Nope, Sep 05 '12 at 21:53

score 4 · Accepted Answer · edited May 23 '17 at 10:34

4

$('#mydiv') //--> displays [Object] because it is jQuery object.

$('#mydiv')[0] // displays [HTMLDivElement] because it is a DOM element

There is a good explanation on why it is an array https://stackoverflow.com/a/7183714/297641

edited May 23 '17 at 10:34

Community

1
1

answered Sep 05 '12 at 21:45

Selvakumar Arumugam

79,297
15
120
134

that link explains it. I was ignorant of this structure – codingbiz Sep 05 '12 at 21:59

score 2 · Answer 2 · answered Sep 05 '12 at 21:44

2

The [0] subscript returns a naked reference to the DOM element, not wrapped as a jQuery object.

answered Sep 05 '12 at 21:44

alex

479,566
201
878
984

I'd also add in that `.get(0)` does the same thing. – Blender Sep 05 '12 at 21:45
and that `[1]` would get the second element in the jQuery object if there was one (which there won't be when grabbing by id). – Quentin Sep 05 '12 at 21:46
is `[Object] = Array {HTMLDivElement}`. What is the structure of `[Object]` – codingbiz Sep 05 '12 at 21:48
@Quentin `[1]` returns `undefined` – codingbiz Sep 05 '12 at 21:48
@codingbiz As it should since only one element was selected and the length is 1 – Kevin B Sep 05 '12 at 21:52
1

@codingbiz — Please read beyond the first 50% of my earlier comment. – Quentin Sep 05 '12 at 21:53

score 1 · Answer 3 · answered Sep 05 '12 at 21:50

1

jQuery wraps selectors in collections. In your case you are using an ID. But when you use a class, multiple references may occur. Keep in mind that this is done to be consistent in all cases.

answered Sep 05 '12 at 21:50

Kevin

222
1
5

JQuery ID Selector -what's this behaviour

3 Answers3