How To Get Element By Class Name In JavaScript ?

Last Updated : 06 Sep, 2024

When working with the DOM in JavaScript, selecting elements by their class names is a common task. JavaScript provides several methods to achieve this, whether we need to select one or multiple elements. In this article, we will cover different approaches to get elements by class name in JavaScript.

Prerequisites

Below are the following approaches to get elements by class name in Javascript:

Table of Content

Using document.getElementsByClassName()
Using document.querySelector()
Using document.querySelectorAll()

1. Using document.getElementsByClassName()

In this approach we are using the document.getElementsByClassName() method. This method selects all elements with a specific class name and returns a live HTMLCollection. Think of it as a way to collect all elements with same label. In this, list gets updated automatically if elements are added or removed.

Syntax:

var elements = document.getElementsByClassName("className");

Example: In this example we are using the getElementsByClassName() method to get element by class name in javascript.

JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Get Elements by Class Name</title>
    <style>
        .output {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
    </style>
</head>

<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <div class="output" id="output1"></div>

    <script>
        var boxes =
         document.getElementsByClassName("box");
        var output =
         document.getElementById("output1");
        output.innerHTML = 
        "Number of boxes: " + boxes.length;
    </script>
</body>

</html>

Output:

file — Output Using document.getElementbyClassName

2. Using document.querySelector()

In this approach we are using the document.querySelector() method. This method returns the first element that matches the specified selector (class name). It is useful when you only need to select a single element by class name.

Syntax:

var element = document.querySelector(".className");

Example: In this example we are using the querySelector() method to get element by class name and we will change the background color of selected class in javascript.

JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,'' initial-scale=1.0">
    <title>Query Selector Example</title>
    <style>
        .box {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script>
        var firstBox = 
        document.querySelector(".box");
        firstBox.style.backgroundColor =
         "lightblue"; // Change the background color to light blue
        firstBox.style.color = "white"; // Change the text color to white
    </script>
</body>

</html>

Output:

3. Using document.querySelectorAll()

In this approach we are using the document.querySelectorAll() method. This method finds all elements that match a specific CSS selector, like class name. It gives you a static list, which means it wont automatically update if page changes.

Syntax:

var elements = document.querySelectorAll(".className");

Example: In below example we are using the querySelectorAll and we will print all the content which have that class name.

JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Query Selector All Example</title>
    <style>
        .output {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
    </style>
</head>

<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <div class="output" id="output3"></div>

    <script>
        var allBoxes = 
        document.querySelectorAll(".box");
        var output = 
        document.getElementById("output3");
        var content = "Contents of all boxes: <br>";
        allBoxes.forEach(function (box) {
            content += box.innerText + "<br>";
        });
        output.innerHTML = content;
    </script>
</body>

</html>