HowToDoInJava

  • Java 8
  • Regex
  • Concurrency
  • Best Practices
  • Spring Boot
  • JUnit5
  • Interview Questions
  • Dark Mode

JavaScript DOM Objects vs. jQuery Objects

By Lokesh Gupta | Filed Under: JavaScript, jQuery

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.

Remember that a jQuery object may represent a single DOM object, or it may represent a set of many DOM objects. So if you apply an operation on the jQuery object, it may apply to many DOM objects.

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 !!

TwitterFacebookLinkedinRedditPocket

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

1
Leave a Reply

This comment form is under antispam protection
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
This comment form is under antispam protection
  Subscribe  
newest oldest most voted
Notify of
Dan

Good article.

Vote Up0Vote Down  Reply
3 years ago

Search Tutorials

JavaScript / jQuery Tutorials

  • Ajax Tutorial
  • jQuery – Ajax
  • jQuery – Deep Cloning
  • jQuery – Selectors
  • jQuery – All Selector
  • jQuery – Cut, Copy or Paste Events
  • jQuery – ENTER Key Press Event
  • jQuery – Keypress vs. Keydown
  • jQuery – Funny Discussion on SO
  • JavaScript – Equality vs Identity
  • JavaScript – Variable Scope Rules
  • JavaScript – Global Variables
  • JavaScript – MVC and PubSub
  • JavaScript – DOM vs. jQuery Objects
  • JavaScript – Unit Test with Jasmine
  • JavaScript – Information Masking

Popular Tutorials

  • Java 8 Tutorial
  • Core Java Tutorial
  • Collections in Java
  • Java Concurrency
  • Spring Boot Tutorial
  • Spring AOP Tutorial
  • Spring MVC Tutorial
  • Spring Security Tutorial
  • Hibernate Tutorial
  • Python Tutorial
  • Jersey Tutorial
  • Maven Tutorial
  • Log4j Tutorial
  • Regex Tutorial

Meta Links

  • Advertise
  • Contact Us
  • Privacy policy
  • About Me

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2016 · HowToDoInjava.com · All Rights Reserved. | Sitemap

wpDiscuz