jQuery object and DOM element
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.
Most jQuery member Functions do not have a return value but rather return the current jQuery Object or another jQuery Object.
So,
console.log("(!!) jquery >> " + $("#id") ) ;
will return [object Object], i.e. a jQuery Object which maintains the collection which is the result of evaluating the selector String ("#id") against the Document,
while ,
console.log("(!!) getElementById >> " + document.getElementById("id") ) ;
will return [object HTMLDivElement] (or in fact [object Object] in IE) because/if the return value is a div Element.
Also what methods can operate on jQuery object vs DOM element? (1) Can a single jQuery object represent multiple DOM elements ? (2)
(1) There is a host of member Functions in jQuery that pertain to DOM Objects. The best thing to do imo is search the jQuery API documentation for a relevant Function once you have a specific task (such as selecting Nodes or manipulating them).
- jQuery documentation
(2) Yes, a single jQuery Object may maintain a list of multiple DOM Elements. There are multiple Functions (such as jQuery.find or jQuery.each) that build upon this automatic caching behaviour.
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()
I just barely started playing with jQuery this last month, and I had a similar question running around in my mind. All the answers you have received so far are valid and on the dot, but a very precise answer may be this:
Let's say you are in a function, and to refer to the calling element, you can either use this, or $(this); but what is the difference? Turns out, when you use $(this), you are wrapping this inside a jQuery object. The benefit is that once an object is a jQuery object, you can use all the jQuery functions on it.
It's pretty powerful, since you can even wrap a string representation of elements, var s = '<div>hello <a href='#'>world</a></div><span>!</span>', inside a jQuery object just by literally wrapping it in $(): $(s). Now you can manipulate all those elements with jQuery.