JQuery object and DOM element

Question

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

When jQuery returns an element, it is displayed as [object Object] in the message. When getElementByID returns an element, it is displayed as [object HTMLDivElement] . What exactly does this mean? I mean both of them with a difference?

Also, what methods can work with jQuery vs DOM object? Can a single jQuery object represent multiple DOM elements?

Answer 1

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

A jQuery object is an object that looks like an array containing DOM elements (elements). A jQuery object can contain several DOM elements, depending on the selector you are using.

Also, what methods can work with jQuery vs DOM object? Can a single jQuery object represent multiple DOM elements?

JQuery functions (a complete list on the site) work with jQuery objects, not DOM elements. You can access the DOM elements inside the jQuery function using .get() or directly access the element with the desired index:

 $("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 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 get the DOM element, the jQuery object returns a reference to the element. When you use a built-in function like getElementById , you get a link to the element directly, not contained in the 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 can be executed without jQuery:

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

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

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

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

Answer 3

I barely started playing with jQuery last month, and I had a similar question in my head. All the answers you have received so far are valid and accurate, but a very accurate answer may be as follows:

Say you are in a function and referring to the calling element, you can use this or $(this) ; but what is the difference? It turns out that when you use $(this) , you wrap this inside a jQuery object. The advantage is that when an object is a jQuery object, you can use all the jQuery functions on it.

This is pretty powerful as you can even wrap the string representation of var s = '<div>hello <a href='#'>world</a></div><span>!</span>' elements inside a jQuery object, just literally wrapping it in $ (): $(s) . Now you can manipulate all these elements with jQuery.

Answer 4

Most jQuery Functions members have no return value, but rather return the current jQuery Object or another jQuery Object .

---

So,

 console.log("(!!) jquery >> " + $("#id") ) ; 

will return [object Object] , ie a jQuery Object that maintains a collection that is the result of evaluating a String ( "#id" ) selector against a Document ,

while

 console.log("(!!) getElementById >> " + document.getElementById("id") ) ; 

will return [object HTMLDivElement] (or actually [object Object] in IE) because / if the return value is equal to div Element .

---

Also, what methods can work with jQuery vs DOM object? (1) Can a single jQuery object be multiple DOM elements? (2)

(1) In jQuery, there is a host of the Function member, which refers to DOM Object s. The best thing that imo needs to do is to find the jQuery API documentation for the corresponding Function after you have a specific task (e.g. selecting Node or managing them). A.

• JQuery documentation

(2) Yes, a single jQuery Object can contain a list of several DOM Element s. There are several Functions (e.g. jQuery.find or jQuery.each ) that rely on this automatic caching.

Answer 5

It's just your browser is smart. These are both objects, but DOMElements are special objects. jQuery just wraps DOMElements into a Javascript object.

If you want more information about debugging, I recommend that you take a look at debugging tools such as Firebug for Firefox and the built-in Chrome inspector (very similar to Firebug).