HTML - DOM getElementsByClassName() Method

The HTML DOM getElementsByClassName() method is used to retrieve a live HTMLCollection of all elements in the document that have the specified class name. In HTML, the "class" attribute is an identifier that allows you to apply CSS styles and manipulate elements using JavaScript.

Using this method, you can easily select and manipulate multiple elements sharing the same class, allowing dynamic changes to the web page. Each element in the collection can be accessed using index which starts from 0.

Spaces are used to separate multiple class names for an element. For example:<p class = "tp1 tp2 tp3"></p>

The following interactive example demonstrate the usage of the getElementsByClassName() method for different scenarios −

DOM getElementsByClassName() Method

Welcome to Tutorialspoint

You are at the right place to learn.... Visit for more

If you click the "Get All Class" button, it will display the total number of elements with the class name "tp"
If you click the "Change Class" button, it will change the class of the current <div> element to a different class.

Syntax

Following is the syntax of the HTML DOM getElementsByClassName() function −

document.getElementsByClassName(classname);

Parameters

This method accepts a single parameter as listed below:

Parameter	Description
classname	It represents class name of the elements which you want to search in a document.

Return Value

It returns a collection of elements with specified class names in the parameter, and the returned elements are sorted as they appear in the document.

Example 1: Access any Element using Class Name

Following example demonstrates the usages of the HTML DOM getElementsByClassName() method −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByClassName() Method</title>
</head>
<body>
<div class="tp">Tutorialspoint (TP)</div>
<script>
   let my_class = document.getElementsByClassName('tp');
   alert("We accessed an element through the class name: " + my_class[0].innerHTML);
</script>
</body>
</html>

The above program accesses an element using its class name −

Example 2: Change the Background Color

In this example, we use the HTML DOM getElementsByClassName() method to change the background color of an element having the class name "demo" −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByClassName() Method</title>
<style>
   button{
       padding: 10px 20px;
       cursor: pointer;
   }
   div{
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to add backgroundColor</p>
<div class="tp">
<p>Welcome to Tutorialspoint...</p>
</div>
<button onclick="fun()">Add BackgroundColor</button>
<script>
   function fun() {
      document.getElementsByClassName("tp")[0].style.backgroundColor = "green";
   }
</script>
</body>
</html>

On executing the above program, a button is displayed when clicking background color "green" will be added to an element −

Example 3: Setting the Border of an Element

In this example, we set the border of a paragraph with the specified class name −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByClassName() Method</title>
<style>
   button{
       padding: 8px 20px;
       cursor: pointer;
   }
   .body1{
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click to set the border.</p>
<button onclick="fun()">Add Border</button>
<p class="body1">Welcome to Tutorials Point..</p>
<script>
   function fun() {
      document.getElementsByClassName("body1")[0].style.border = "solid 2px #7ef79c";
   }
</script>
</body>
</html>

Once the above program is executed, a button is displayed when click border will be added to an element −

Example 4: Get the number of elements having same class

In the following example, we will get the number of elements which have the class name = "tp" −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByClassName() Method</title>
<style>
   button{
       padding: 8px 20px;
       cursor: pointer;
   }
</style>
</head>
<body>
<p>Click to get the number of classes with class name ='tp'.</p>
<button onclick="fun()">Click me</button>
<p class="tp">I am a paragraph with class tp</p>
<p class="tp">I am a paragraph with class tp</p>
<p class="tp">I am a paragraph with class tp</p>
<p class="tp1">I am a paragraph with class tp1</p>
<p id="num"></p>
<script>
   function fun() {
      let x = document.getElementsByClassName("tp").length;
      document.getElementById("num").innerHTML = "Number of elements with class 'tp': " + x;
   }
</script>
</body>
</html>

The above program returns the number of elements, which have a class name equal to "tp" −

Supported Browsers

Method
getElementsByClassName()	Yes 1	Yes 12	Yes 3	Yes 3.1	Yes 9.5

html_dom.htm

Print Page