Select element by class with JavaScript (querySelector)

In this article, we will learn how to select element by class in the JavaScript language, so that the necessary changes are then made via the DOM.

What’s up, programmer, let’s learn something new?

Watch this content on YouTube:

In JavaScript we have several ways to select elements and make changes to their aspects via DOM

We can select by id, tags and also classes, which is what we’ll cover in this post

The method for selecting an element by class is getElementsByClassName

It must be called by the document and as we are using one class per selector, it has an important peculiarity

If there are two elements with the same class, the method will bring them both. Isn’t that cool?

So look at the syntax:

// Select by class name
let els = document.getElementsByClassName("elementClass");

This way it is possible to select elements via class with JavaScript

Note: do not add the ( . ) of the class as it is done in CSS, just its name

If you choose to select only one element, the best options would be by id or query selector, see the syntax:

// Select by id
let el = document.getElementById("id");

// Select element by CSS selector
let el2 = document.querySelector(".someClass");

These two samples will only bring a single element

Remembering that the querySelector expects a CSS selector, that is, using # for ids and ( . ) for classes

As for getElementById, just the id name in text

We learned that to select one element per class and multiple elements we also use the getElementsByClassName method

If our option is for only one element, it is better to prefer the methods: getElementById or querySelector

Want to learn more about JavaScript? Click here!