JavaScript getElementsByClassName – get element by Class Name

by

In this JavaScript getElementsByClassName() example will will sho you how to get or select an element by their class name attribute value in JavaScript. This method returns an array of matched elements, because more than one element on the page can have the same class.

More then times we need to get the div element div so we use document.getElementById or document.getElementByClassName for getting any element easy way. Here we have added 2 or more best easy examples to how to use the getElementsByClassName() method to select elements by class name.

Note: The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.

Javascript getElementsByClassName() method Syntex

The getElementsByClassName() method accepts a single argument which is a string that contains one or more class names:

let element = document.getElementsByClassName(className); // className is your div class

This syntax, the classNames parameter is a string that represents a class name to match.

let element = document.getElementsByClassName('.item'); //Here item is your div class

If you match elements by multiple classes, you need to use whitespace to separate them like this:

let element = document.getElementsByClassName('bt-primary btn-secondery');

JavaScript getElementsByClassName() Examples

The value of the class attribute is a space-separated list of the classes of the element. The classes are case-sensitive. The HTMLCollection object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0. The getElementsByClassName() method is available on the document object and any HTML element.

Example 1:

The following example get all elememts which are containing class class=”content-note”: 

<html>
<head>
  <title>JavaScript getElementsByClassName() example</title>
</head>
<body>
  <div>
    <p class="content-note">The first content-note.</p>
    <p class="content-note">The second content-note.</p>
  </div>
  <p class="content-note">The third content-note.</p>

  <script>
    let elements = document.getElementsByClassName('content-note');

    for (let i = 0; i < elements.length; i++) {
      console.log(elements[i].innerHTML);
    }
  </script>
</body>
</html>

Example 2:

This example change the background color of all elements with class=”content-note”. We can add the style using javascript for div element. Wherease we can add class by using the getElementByClass and add tham style for that class.

<html>
<head>
  <title>JavaScript getElementsByClassName() example</title>
</head>
<body>
  <div>
    <p class="content-note">The first content-note.</p>
    <p class="content-note">The second content-note.</p>
    <p class="content-note">The third content-note.</p>
    <button class="btn btn-primary" onclick="changeColor()">Try it</button>
  </div>

  <script>

    function changeColor() {
        let elements = document.getElementsByClassName('content-note');
    
        for (let i = 0; i < elements.length; i++) {
           elements[i].style.backgroundColor = "red";
        }
    }

  </script>
</body>
</html>

I hope you enjoy with get element by class name in javascript. If you have any question let me know in comment section.

Leave a Comment