The difference between $ () in jquery and getElementById () in JavaScript

The success of jquery owes much to its powerful selector.

However, I believe that many students who are beginners to jquery will encounter the following problems.

Under JavaScript, we can get page elements based on getElementById (). As follows:

var oDiv1 = document.getElementById ("divID");

It's much easier to use jquery:

var oDiv2 = $ ("#divId");

In general, we would think that these two items return a page element object with an ID of "divID". But in fact, these two things are different:

// return "[Object Htmldivelement]" // returns "[Object Object]"

You can see that ODIV1 is really a page element object, but what about ODIV2?

// effective // does not take effect, proves that ODiv2 does not refer to the page element with id "divID"

Let's look at the browser console to see what they are:

ODiv1 oDiv2< [<div id= "divID";]

You can see that oDiv2 is actually a number of objects!

In fact, thejquery selector returns an array object where the page element object is placed, and getElementById () returns a page element object.

So when we're going to do something like ODiv2, it's going to be like this:

// effective // effective // actually ODIV1 = odiv2[0]

The difference between $ () in jquery and getElementById () in JavaScript