HTML - DOM Element getElementsByClassName() Method

Quiz

HTML DOM element getElementsByClassName() method retrieves a live HTMLCollection of elements that match a specified class name within a document or a specific element. It allows for efficient selection and manipulation of multiple elements based on their class attribute.

Syntax

element.getElementsByClassName(classNames)

Parameters

This method accepts a single parameter as mentioned above and described below.

Parameters	Description
classNames	A string specifying one or more class names to retrieve matching elements.

Return Values

Return a HTMLCollection object that contains collection of elements with the specified class name.

Examples of HTML DOM Element getElementsByClassName() Method

Below are some examples that demonstrate the usage of getElementsByClassName() Method

Counting Elements by Class

This HTML example shows how to count and show, upon button click, the number of elements that have a given class (note).

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Counting Elements by Class
    </title>
</head>
<body>
    <p class="note">Note 1</p>
    <p>Paragraph 2</p>
    <p class="note">Note 3</p>
    
    <button onclick="countNotes()">
    Count Notes
    </button>
    <div id="countDisplay"></div>
    
    <script>
    // Count elements with class 'note' and display count
    function countNotes() {
        const notes = 
        document.getElementsByClassName('note');
        document.getElementById
        ('countDisplay').textContent = 
        `Number of notes: ${notes.length}`;
    }
    </script>
</body>
</html>

Add Event Listener

This attaches a click event listener to buttons with class "btn". Clicking any button triggers an alert ("Button clicked!"), showcasing getElementsByClassName() for event handling.

 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add Event Listener</title>
</head>
<body>
    <button class="button">Button 1</button>
    <button class="button">Button 2</button>
    <button class="button">Button 3</button>

    <script>
        const buttons = 
        document.getElementsByClassName('button');
        for (let i = 0; i 
Dynamic Event Handling
This example introduces clickable <div> elements by selecting all elements with a specific class using getElementsByClassName(). When a <div> is clicked, it dynamically changes the background color of the clicked <div>.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dynamic Event Handling</title>
    <style>
    .clickable {
        cursor: pointer;
        padding: 10px;
        margin: 5px;
        background-color: lightgray;
    }
    .highlighted {
        background-color: lightblue;
    }
    </style>
</head>

<body>
    <div class="clickable">Clickable Div 1</div>
    <div class="clickable">Clickable Div 2</div>
    <div class="clickable">Clickable Div 3</div>
    
    <script>
    // Toggle class 'highlighted' on click
    const clickableDivs = 
    document.getElementsByClassName('clickable');
    for (let i = 0; i < clickableDivs.length; i++) {
        clickableDivs[i].addEventListener
        ('click', function() {
        this.classList.toggle('highlighted');
        });
    }
    </script>
</body>

</html>     

Supported Browsers

Method
getElementsByClassName()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page