How to target an HTML class or ID with JavaScript

Photo by Pankaj Patel on Unsplash

HTML classes and IDs are essential for getting JavaScript to run on our pages. This quick article will show how to easily target them and use them with JavaScript.

At the end of the article you will find an example of how to apply this to a real situation involving an event listener.

Selecting HTML classes with JavaScript

To select a specific HTML class using JavaScript, we need to target it and then store it as a variable.

This is what our HTML element looks like:

Code from a text editor: <p class=”vanillaCupcake”>This vanilla cupcake is sweet, sprinkly and fluffy.</p>

Here is the one line of JavaScript we need to target this element and store it as a variable:

Code from a text editor: const vanillaDescription = document.querySelector(‘.vanillaCupcake’);

Let’s break this down:

const vanillaDescription = : This is the variable being declared so that we can re-use it elsewhere in our code.

document : This is telling the code to look at the document (i.e. the whole page).

.querySelector : This is the method we’re running to tell our code to look over the document, and to find the first element that matches the specific selector we’re looking for. In this case, we’re looking for a specific class.

Note: If we want to find all elements with that class, we can use .querySelectorAll instead.

(‘.vanillaCupcake’) : This is how we tell our method (.querySelector) what to look for. In this case, we want a specific class. We must preface a class with a period (to tell it we’re looking for a class). It must go inside quotation marks and parentheses.

Selecting HTML IDs with JavaScript

To select an HTML ID using JavaScript we need to point to it and then store it as a variable.

This is what our HTML element looks like:

Code from a text editor: <p id=”chocolateCupcake”>This chocolate cupcake is sweet, sprinkly and creamy.</p>

Here is the one line of JavaScript we need to target this element and store it as a variable:

Code from a text editor: const chocolateDescription = document.getElementById(‘chocolateCupcake’);

Let’s break this down:

const chocolateDescription = : This is the variable being declared so that we can re-use it elsewhere in our code.

document : This is telling the code to look at the document (i.e. the whole page).

.getElementByID : This is the method we’re running to tell our code to look over the document, and to find the first element with the specific ID we’re looking for.

Note: Remember that in HTML, IDs are unique. We should never reuse an ID. If we need to grab multiple elements, they should be assigned a class (which can be applied to multiple elements at once) instead.

(‘chocolateCupcake’) : This is how we tell our method (.querySelector) what to look for. In this case, we want an ID. There is no prefix because this method is only looking at IDs. It must also go inside quotation marks and parentheses.

Use Example Using an Event Listener

Now, when we want our JavaScript to target those elements, we only need to call the variable.

Here’s an example:

Code in a text editor: vanillaDescription.addEventListener(‘mouseover’, test);

This line is adding an event listener (in this case, a mouseover) to our vanillaDescription variable.

This means we’re adding an event listener to our element with a class name of vanillaCupcake through the variable we created. When a user’s mouse goes over the element, it will run a custom function called “test” (function not shown).

For more information on event listeners and how to use them, check out this article.

That’s it!

Hopefully this helps clarify how to target HTML classes and IDs with JavaScript. For a look at the full code files for this article, they can be found here.

Good luck!