JavaScript DOM Objects vs. jQuery Objects

In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements. If you want to know more about these objects in detail and how to work with them, and convert into one another then continue reading this tutorial.

Table of Contents

What are JavaScript DOM objects?
What are jQuery objects?
How to determine Whether an Object is DOM or jQuery?
Convert an Object from DOM to jQuery and back

What are JavaScript DOM objects?

As mentioned earlier, DOM objects are used by browser directly to render the webpage in browser window. The browser receives an HTML document from a web server, which is just text. The browser proceeds to parse this text into an internal structure that it can actually use to render the page visually. The DOM represents that internal structure a browser has of an HTML document. A DOM object represents a visual or functional object on the page which was created from the original HTML document.

Even when browser has fully rendered the webpage, you can use JavaScript to change the DOM objects, it’s attributes and values. Any change done in such way automatically refreshes the visual representation shown in browser window.

The advantage with working with DOM objects is that you have direct access to everything you need to manipulate the HTML element. The disadvantage of DOM objects is that most of the attached functions and attributes are things that the browser needs and are not necessarily useful when you’re working with JavaScript. It makes working with them a little slower, at least for less-experienced developers.

e.g. to change content of a paragraph or label, you can use javascript like this:

document.getElementById("label_firstname").innerHTML = "First Name";

What are jQuery objects?

jQuery objects are wrapper objects around single or multiple DOM elements. The jQuery objects (though technically still JavaScript objects) provide access to the wrapped DOM elements — however, in a much different, much easier, and often much more effective way.

Using jquery objects has it’s own advantages. For example, jQuery provides a lot of useful library methods to search elements inside DOM element it represent, and perform bulk operation on searched elements without iterating them in code.

e.g. to change content of a paragraph or label, you can use jQuery like this:

("#label_firstname").html("First Name");

How to determine Whether an Object is DOM or jQuery?

Many times, when working on any complex application you may find jQuery objects and javascript DOM objects, both in single piece of code. Now you are not sure whether it is a jQuery object, a DOM object, or some other JavaScript object. There is a simple way to tell the difference.

To confirm whether an object is a jQuery object, see whether the object has the jquery attribute:

if( obj.jquery ) {
	//other operation
}

Similarily, to confirm whether an object is a DOM object, see whether the object has the nodeType attribute:

if( obj.nodeType ) {
	//other operation
}

Convert an Object from DOM to jQuery and back

In situations like above, if you want to convert the object from DOM to jQuery or jQuery to DOM, you can do it using below techniques.

Convert DOM object to jQuery object

$() or jquery() method creates a new jQuery object from DOM object.

var jqueryObj = $(domObj);

Convert jQuery object to DOM object

The .get() method returns DOM object wrapped inside jQuery object.

var domObj = jqueryObj.get();

That’s all about javascript DOM objects and jQuery objects. Leave me comments if any question or suggestion.

Happy Learning !!