How to Select Elements by Class Name in the JavaScript

Syntax

document.getElementsByClassName(classname)

Definition and Usage

Here, you can use the getElementsByClassName( ) for selecting the elements by class name in the JavaScript. This particular method returns a collection of all the elements in a specified document with a particular class name, provided as a NodeList object. The ‘NodeList’ object represents the collection of Nodes that can be accessed with the help of index numbers. Here, the ‘index number’ starts with “0”.

For using this object, one of the tips is that you can use ‘length property’ of the NodeList object to check out the number of elements provided in a specific Class Name. Then, you can loop through all provided elements in JavaScript and take out the information you require. This usage of the getElementsByClassName( ) can be seen with the help of the below-stated example.

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Select Element by Class in JavaScript</title>

<style type="text/css">

    .box {

        height: 50px;

        background: #ddd;

        margin: 20px;

    }

    .box.bordered{

        border: 5px solid #333;

    }

</style>

</head>

<body>

    <div class="box"></div>

    <div class="box bordered"></div>

    <div class="box"></div>

    <div class="box bordered"></div>

    <div class="box"></div>

 

    <script>

        var boxes = document.getElementsByClassName("box");

    

        // Select first box and style it with red background

        boxes[0].style.background = "#CD5C5C";

    

        /* Select elements having both "box" and "bordered" class 

        and style them with yellow background */

        var borderedBoxes = document.getElementsByClassName("box bordered");

        for(var i = 0; i < borderedBoxes.length; i++){

            borderedBoxes[i].style.background = "#F08080";

        }

        // Select last element and style it with green background

        boxes[boxes.length - 1].style.background = "#FFA07A";

    </script>

</body>

</html>

In the above example, it is shown that getElementsByClassName( ) method returns an array of the matched elements as it can be seen here that more than one element in the JavaScript or a page can possess the same class. Moreover, the ‘classname’ is a parameter here in which the ‘String’ type is used. Therefore, the requirement that you will get involves Class Name of the elements that you want to receive in the JavaScript. One thing worth noting is here that if you want to search for ‘Multiple Class Names’ then it must be separated with the spaces like the “test demo”.

The method used in JavaScript to select the Class Name, which is getElementsByClassName also returns an ‘array-like object’ of all the provided child elements that possess all the given class names. Here when you will call on the ‘Document Object’, it will search a complete document that includes the ‘root node’ too.

As shown in the above example, state the getElementsByClassName( ) on any of the elements in JavaScript like the border, style, color, etc. This method will only return Elements that are the descendants of a specific ‘root element’ with its provided ‘Class Names’. This method is specifically supported in the latest browsers of the Internet Explorer or Firefox versions.

View Demo

Leave a Reply

Your email address will not be published. Required fields are marked *