How to select an element or elements by class name?

To select an HTML element from a class name you’ll need to use document.getElementsByClassName() or document.querySelector().

What is the difference between querySelector() vs getElementsByClassName()?

The major difference between querySelector()and getElementsByClassName() is that querySelector() returns the first HTML element that matches the specified selector. getElementsByClassName() will return an array of elements that match the class name.

Let’s look at a code example. Let’s say you have three different button elements with the class .button.

<button class="button">Button 1</button>

<button class="button">Button 2</button>

<button class="button">Button 3</button>

Now let’s see how each utility function behaves when attempting to get an element by a class name.

// Array of all elements with the class name button
console.log(document.getElementsByClassName('button'))

// Prints the first matching element in the DOM – button 1
console.log(document.querySelector('.button'));

Another notable attribute about querySelector() is that it lets you write CSS3 query like. Unlike getElementsByClassName()you just write the class name identifier.

Is there a get element by class?

The short answer is no. There is no get element by class like getElementById() function. But you can use querySelector() to grab a single element by class name. The query selector has to be written like CSS3.

Let’s see how how to use it with a code example!

document.querySelector('body .button:nth-child(2)')

How to get all of the elements with the same class name in JavaScript

To get all the elements that share the same class name, you can use getElementsByClassName() or querySelectorAll().

querySelectorAll() is the preferred method because it’s a more modern approach & allows you to write CSS3 queries–has more flexibility than getElementsByClassName().

// Array of all elements with the class name button
console.log(document.getElementsByClassName('button'))

// Array of all elements with the same class name
console.log(document.querySelectorAll('.button'));

How to loop in querySelectorAll() or getElementsByClassName()

You can use a regular for-loop or Array.forEach() to iterate over each item that was captured with querySelectorAll(). Array.forEach()does not work with getElementsByClassName() because it’s not a NodeList[] it’s an HTMLCollection.

If you attempt to do document.getElementsByClassName("some_class").forEach() you may get an error message such as:

document.getElementsByClassName("some_class").forEach is not a function

To iterate over getElementsByClassName()you can use a for-in loop or a basic for-loop.

Let’s look at examples how to loop through both use case scenarios.

const elements = document.querySelectorAll('.button');

const element2 = document.getElementsByClassName('button');

// Iterate with forEarch()
elements.forEach(element => console.log(element));

// Example #1: for-in for getElementsByClassName()
for (const key in element2) {
    if (Object.hasOwnProperty.call(element2, key)) {
        const element = element2[key];
        console.log(element)
    }
}

// Example #2: for-loop for getElementsByClassName()
for (let index = 0; index < elements2.length; index++) {
    const element = elements2[index];
    console.log(element)
}

I like to tweet about code and post helpful code snippets. Follow me there if you would like some too!