jQuery object and DOM element

Question

I would like to understand relationship between jQuery object and DOM element..

When jQuery returns an element it shows up as [object Object] in an alert. When getElementByID returns an element it shows up as [object HTMLDivElement]. What does that mean exactly? I mean are both of them objects with a difference ?

Also what methods can operate on jQuery object vs DOM element? Can a single jQuery object represent multiple DOM elements ?

Answer 1

I would like to understand relationship between jQuery object and DOM element

A jQuery object is an array-like object that contains DOM element(s). A jQuery object can contain multiple DOM elements depending on the selector you use.

Also what methods can operate on jQuery object vs DOM element? Can a single jQuery object represent multiple DOM elements ?

jQuery functions (a full list is on the website) operate on jQuery objects and not on DOM elements. You can access the DOM elements inside a jQuery function using .get() or accessing the element at the desired index directly:

$("selector")[0] // Accesses the first DOM element in this jQuery object $("selector").get(0) // Equivalent to the code above $("selector").get() // Retrieve a true array of DOM elements matched by this selector 

In other words, the following should get you the same result:

<div id="foo"></div>  alert($("#foo")[0]); alert($("#foo").get(0)); alert(document.getElementById("foo")); 

For more information on the jQuery object, see the documentation. Also check out the documentation for .get()

Answer 2

When you use jQuery to obtain an DOM element, the jQuery object returns contains a reference to the element. When you use a native function like getElementById, you get the reference to the element directly, not contained within a jQuery object.

A jQuery object is an array-like object that can contain multiple DOM elements:

var jQueryCollection = $("div"); //Contains all div elements in DOM 

The above line could be performed without jQuery:

var normalCollection = document.getElementsByTagName("div"); 

In fact, that's exactly what jQuery will do internally when you pass in a simple selector like div. You can access the actual elements within a jQuery collection using the get method:

var div1 = jQueryCollection.get(0); //Gets the first element in the collection 

When you have an element, or set of elements, inside a jQuery object, you can use any of the methods available in the jQuery API, whereas when you have the raw element you can only use native JavaScript methods.