jQuery Selector VS getElementById

What’s the difference?

4 min readOct 2, 2018

I recently had a phone interview and was asked some questions that I could have answered better. The purpose of this series of blog posts is to help me remember these concepts, so next time I will have a better answer. If others find these posts useful, all the better.

Two common methods for selecting elements from a web page so they can be manipulated in JavaScript are document.getElementById() and the jQuery selector. The purpose of this post is to explore the outcome of using both of these methods, and how they are different.

Setup

The setup for this test is an HTML document with the following in the body of the document:

<div id=”main”></div>

I am going to use both document.getElementById(‘main’) and $(‘#main’) to select this element so I can examine the object each method produces.

console.dir()

I will be using console.dir() to display these objects in the JavaScript console. console.dir() “displays an interactive list of the properties of the specified JavaScript object.” For more information, see this article on MDN.

document.getElementById(‘main’)

When I run the following code:

const element = document.getElementById(‘main’);
console.dir(element);

And look in the console, I see a single object named “div#main.” When I click the triangle to the left of this object, a list of properties and methods are displayed. At the bottom of the list I see “__proto__: HTMLDivElement”, also with a triangle to the left. By clicking on this triangle I see a list of properties and methods associated with the prototype of the Div Element. I can continue going down the list looking at the prototype chain and all the associated properties and methods until I arrive at the base prototype of Object. What I am seeing here is the DOM object for the div I selected.

`$(‘#main’)`

Next I run the following code:

const $element = $(‘#main’);
console.dir($element);

This time I see an object with the label w.fn.init(1). When I click the triangle to the left, three things are listed: the DOM object that looks like it is in a array with one element (0: div#main), a length property, and the prototype for the jQuery object (__proto__: Object(0)).

When I click the triangle to the left of the DOM object, it looks just like the DOM object I saw earlier. Since a jQuery object is an array-like object, I can select just the DOM object in the jQuery object like this:

const $element = $(‘#main’)[0];

When I compared this DOM object to the earlier DOM object:

console.log(element === $element ? ‘true’ : ‘false’);
// returns ‘true’

I see that they are, in fact, the same object.

When I click the arrow to the left of the jQuery prototype I see all the methods that jQuery provides that can be applied to this DOM object.

Part of the jQuery Object in the Console

Conclusion

The objects returned by document.getElementById() and the jQuery selector are different. document.getElementById() returns a DOM object with all the properties and methods associated with a DOM object. This includes all the properties and methods associated with the DOM object’s prototype, and the DOM object’s prototype’s prototype, all the way up the prototype chain until we reach the base object.

The object return by the jQuery selector is a jQuery object. This jQuery object includes the DOM object. If fact, if you use a selector that returns more than one element, the jQuery selector will return multiple DOM objects. These DOM objects are placed in an array-like object and can be accessed individually using their index. The jQuery object also has some properties. In this case, I only saw one property, but other times I saw a few more properties. Finally, the jQuery selector has a prototype that includes all the jQuery methods that can be called against the jQuery object.

While researching this article I found this article from the jQuery website and this video very informative.

Other Stories in this Series: