How to select element by ID with JavaScript

In this article we are going to learn how to select element by HTML ID with pure JavaScript, easily and correctly.

Hey you programmer, let’s learn something new?

In JavaScript we have several ways to select an element, to make the necessary changes or animations via DOM

One of the ways is the id, which helps us to select unique elements.

In other words, unlike other methods, it selects only one tag/element

So here we go:

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

We must use the getElementById method of document, let’s pass a parameter which is the id of the target element

Remembering that we don’t need the #, which is used in CSS, just the name of the element id

So we will receive an element, which we can change its properties like text, CSS and more

Another way would be using CSS selector, with the querySelector method, check it out:

// Selecting element by CSS selector
let el = document.querySelector("#elementId");

Here we need the #, which is part of the CSS rule id selector

And we will also receive only a single element as a return from this method, if found

Conclusion

In this article we learned a way to select an element via id

We use the getElementById method, which is specific to this case and returns only one element.

If we want more than one, we can use the methods: getElementsByClassName, getElementsByTagName or querySelectoAll

Want to learn more about JavaScript? Click here!