Share via:

Why You Should use querySelector Instead of getElementById

Should you use getElementById or querySelector? This article will help hopefully help you decide.

110 views
d

By. Jacob

Edited: 2019-04-30 09:35

querySelector vs getElementById, JavaScript

Using getElementById in JavaScript is fine when selecting elements that are unique on a page, since these can have an ID attribute assigned. Often you will need to perform more complex selections, and that is where querySelector comes into the picture.

They can both be used to select elements based on a unique ID, so which one to use when selecting by id comes down to personal preference.

Note. element ids must be unique in HTML. If you need to select multiple elements, you may use a class instead.

The thing with getElementById is that it only allows to select an element by its id. The querySelector method can be used in other situations as well, such as when selecting by element name, nesting, or class name.

In other words, the main benefit of using querySelector or querySelectorAll is that we can select elements using CSS selectors, which gives us a uniform way of dealing with element selection, and that makes it a preferred way of selecting elements to many developers – myself included!

Selecting an element by id is done simply by using the hashtag (#) followed by the element name, similar to how you would do it in CSS:

let element = document.querySelector("#unique_id");

You can also select elements that belong to a certain class, but you may consider using querySelectorAll instead, since this method allows you to select multiple elements.

When selecting classes, remember the dot (.) in front of the class name:

let element = document.querySelector(".element_class");

getElementById vs querySelector

There is almost no difference between the two, and querySelector could easily end up becoming the standard way of doing things, since it is the newer one, and allows for more complex selections.

For consistency, it is probably best to choose one and stick with it throughout your scripts. It just looks less messy if you ask me.

Consider the fact that younger developers might work on the code, and they might get unnecessarily confused if they encounter inconsistencies such as multiple ways of doing the same things. This require extra processing energy, not only due to confusion, but also due to potential annoyance over how messy the code is.

Note. A simple search and replace is often enough to ensure consistency in your code!

The querySelector method is supported by all major browsers while getElementById can be used if support for really old browsers is needed.

How to use querySelectorAll

When selecting multiple elements with querySelectorAll, you will usually loop over the elements using a forEach loop.

It is also possible to use other types of loops, but for the sake of simplicity let us stick with the forEach in this tutorial.

let all_images = document.querySelectorAll(".article_image");
all_images.forEach(image => {
  console.log('image: ', image);
});

Note we used console.log() above. This will log a message to your browser-console. You can view this message by opening developer tools in your browser ([CTRL] + [SHIFT] + [I] in Chrome).

Alternatively, you can also use alert().

Finally, keep in mind you can also preview the result of querySelectorAll() using console.table():

let all_images = document.querySelectorAll(".article_image");
console.table(all_images);

getElementsByClassName and querySelectorAll

There is a major difference between how querySelectorAll and getElementsByClassName works – the former being the more powerful one.

Keep in mind, querySelectorAll is supported by all modern browsers where getElementsByClassName is better suited if you must support old browsers.

var elements = document.getElementsByClassName("myClassName");

Selecting elements by class name will create an object of the selected elements, you can loop through this object to handle the selection:

elements.forEach(element => {
  console.log('element: ', element);
});

You can also select elements belonging to multiple classes:

var elements = document.getElementsByClassName("some_class another_class");

The main difference between the two is, querySelectorAll will allow you to select elements using CSS selectors, making it possible to select both by element name and by class name where getElementsByClassName only allows selecting by class name.

Comments