How to get element by Class Name using pure JavaScript

There are different ways to find elements with values on a web page in JavaScript. One of the most common method is getElementById(), which finds elements using each element’s unique id. You can also find elements (a group of elements) using the class name. In such cases you can use the getElementsByClassName() method of document object in JavaScript.

Get elements by Class name in JavaScript

The getElementsByClassName() method returns an HTMLCollection object, which will have details about all elements with a specific class name. The method is "case sensitive".

Let’s see an example

The Markup and the Script

I have few <p> elements to show different birds and reptiles. The birds are defined using the class name .birds and the reptiles using class .reptiles.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript getElementsByClassName() Method</title>
    <style>
    	.birds {
            color: #999;
        }
        .reptiles {
            color: red;
        }
    </style>
</head>
<body>
    <div>
    	<p class='birds'>Rock Pigeon</p>
        <p class='birds'>Black Vulture</p>
        <p class='reptiles'>Snake</p>
        <p class='birds'>Mourning Dove</p>
        <p class='reptiles'>Lizard</p>
        <p class='reptiles'>Gecko</p>
    </div>
    
    <input type='button' id='bt' onclick='showEleByClassName("birds")' value='Show'>
    <p id="result"></p>
</body>
<script>
 let showEleByClassName = (cls) => {
    let msg = document.getElementById('result');
    result.innerHTML = '';            

    // The getElementsByClassName() method returns an HTMLCollection object. 
    // Using the spread (...) operator we'll convert the object into an array.
    // So we can use map() function to iterate (or loop) through each array element.

    let arrMyClass = [...document.getElementsByClassName(cls)];
    arrMyClass.map(arrMyClass => result.innerHTML +=  arrMyClass.innerHTML + '<br />')
  }
</script>
</html>

Try it

It is simple and doesn’t need a lengthy explanation. The getElementsByClassName() method returns an HTMLCollection object. Using the spread (...) operator, I am converting the object into an array, so I can use the map() function to iterate through each array items.

Using getElementsByClassName() with Multiple Class Names

The getElementsByClassName() method can take multiple class names as parameter. So, you can find elements on your web page which has multiple class names. For example, I have two class names like this.

<!DOCTYPE html>
<html>
<head>
    <title>getElementsByClassName() Method with Multiple Class Names</title>
    <style>
    	.birds {
            color: #999;
        }
        .cannot_fly {
            color: red;
        }
    </style>
</head>
<body>
    <div>
    	<p class='birds'>Rock Pigeon</p>
        <p class='birds cannot_fly'>Ostriches</p>   <!--p with multiple class-->
        <p class='birds'>Mourning Dove</p>
        <p class='birds'>Black Vulture</p>
        <p class='birds cannot_fly'>Campbell teal</p>   <!--p with multiple class-->
    </div>
    
    <input type='button' id='bt' onclick='findEleByClass()' value='Show'>
    <p id="result"></p>
</body>
<script>
  let findEleByClass = () => {
    let result = document.getElementById('result');
    result.innerHTML = '';
    
    // using the method with multiple class names.
    let myclass = [...document.getElementsByClassName('birds cannot_fly')];  
    myclass.map(myclass => result.innerHTML += myclass.innerHTML + '<br />')
  }
</script>
</html>

Try it

Note: Multiple class names must be defined to the elements for the above method work properly. Else, you might not get the desired result.

← PreviousNext →