JavaScript getElementsByClassName()

The JavaScript getElementsByClassName() method returns an object similar to an array, representing all elements that have specified class name. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The value is <span class="x"></span>.</p>
   <p>The value is <span class="x"></span>.</p>
   <p>The value is <span class="x"></span>.</p>
   
   <script>
      var elements = document.getElementsByClassName("x");
      var totElements = elements.length;
      
      for(var i=0; i<totElements; i++)
      {
         elements[i].innerHTML = 10;
      }
   </script>
   
</body>
</html>

Output

The value is .

In above example, the following statement:

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

returns all the three P (paragraph) elements, whose class name is same, that is x, and initialized to the elements variable as an array-like object. Now using the following statement:

var totElements = elements.length;

the length of elements will be initialized to totElements variable. Because elements carry total three elements, therefore 3 will be initialized to totElements variable. And using its indexes, I've set 10 as the content of all P elements, one by one, using for loop.

The above example can also be written as:

<!DOCTYPE html>
<html>
<body>

   <p>The value is <span class="myClass"></span>.</p>
   <p>The value is <span class="myClass"></span>.</p>
   <p>The value is <span class="myClass"></span>.</p>
   
   <script>
      var elems = document.getElementsByClassName("myClass");
      
      for(var i=0; i<elems.length; i++)
         elems[i].innerHTML = 10;
   </script>
   
</body>
</html>

JavaScript getElementsByClassName() Syntax

The syntax of getElementsByClassName() method in JavaScript, is:

getElementsByClassName(className)

It returns an array-like object containing all elements having same specified className.

JavaScript getElementsByClassName() Example

Here is an example of getElementsByClassName() method in JavaScript:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p class="fresherearth">This is para one</p>
   <p class="fresherearth">This is para two</p>
   <p class="fresherearth">This is para three</p>
   
   <script>
      var elems = document.getElementsByClassName("fresherearth");
      for(var i=0; i<elems.length; i++)
      {
         elems[i].style.fontSize = "1.5em";
         elems[i].style.backgroundColor = "red";
         elems[i].style.color = "whitesmoke";
         elems[i].style.padding = "12px";
      }
   </script>
   
</body>
</html>

Output

This is para one

This is para two

This is para three

Now let me modify the above example in a way to pick multiple element(s) by its class names and styles it using JavaScript.

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p class="a">This is para one</p>
   <p class="b">This is para two</p>
   <p class="a">This is para three</p>
   <p class="c">This is para four</p>
   <p class="d">This is para five</p>
   <p class="b">This is para six</p>
   <p class="a">This is para seven</p>
   
   <script>
      var elems = document.getElementsByClassName("a");
      for(var i=0; i<elems.length; i++)
      {
         elems[i].style.fontSize = "1.5em";
         elems[i].style.backgroundColor = "red";
         elems[i].style.color = "whitesmoke";
         elems[i].style.padding = "12px";
      }
      
      var elems = document.getElementsByClassName("b");
      for(var i=0; i<elems.length; i++)
      {
         elems[i].style.fontSize = "1.5em";
         elems[i].style.backgroundColor = "purple";
         elems[i].style.color = "whitesmoke";
         elems[i].style.padding = "12px";
      }
      
      var elems = document.getElementsByClassName("c");
      for(var i=0; i<elems.length; i++)
      {
         elems[i].style.fontSize = "1.5em";
         elems[i].style.backgroundColor = "blue";
         elems[i].style.color = "whitesmoke";
         elems[i].style.padding = "12px";
      }
      
      var elems = document.getElementsByClassName("d");
      for(var i=0; i<elems.length; i++)
      {
         elems[i].style.fontSize = "1.5em";
         elems[i].style.backgroundColor = "#ccc";
         elems[i].style.color = "whitesmoke";
         elems[i].style.padding = "12px";
      }
   </script>
   
</body>
</html>

Output

This is para one

This is para two

This is para three

This is para four

This is para five

This is para six

This is para seven

In above example, let me explain the following JavaScript code:

var elems = document.getElementsByClassName("a");
for(var i=0; i<elems.length; i++)
{
   elems[i].style.fontSize = "1.5em";
   elems[i].style.backgroundColor = "red";
   elems[i].style.color = "whitesmoke";
   elems[i].style.padding = "12px";
}

In above block of code, the statement:

var elems = document.getElementsByClassName("a");

initializes an array-like object that have the class name a, to the variable elems. Therefore, now:

elems[0] indicates to first P tag having class name a. That is, <p class="a">This is para one</p>
elems[1] indicates to second P tag having class name a
elems[2] indicates to third P tag having class name a

And using the for loop, I've applied the style to all these three paragraphs, using JavaScript.

In similar way, the process goes for next three classes, that are b, c, and d.

Since the following three JavaScript codes (responsible to change the style):

elems[i].style.fontSize = "1.5em";
elems[i].style.color = "whitesmoke";
elems[i].style.padding = "12px";

are similar to all, therefore let me wrap these, into a function, in this way:

<!DOCTYPE html>
<html>
<body>

   <p class="a">This is para one</p>
   <p class="b">This is para two</p>
   <p class="a">This is para three</p>
   <p class="c">This is para four</p>
   <p class="d">This is para five</p>
   <p class="b">This is para six</p>
   <p class="a">This is para seven</p>
   
   <script>
      function changeStyle(element)
      {
         element.style.fontSize = "1.5em";
         element.style.color = "whitesmoke";
         element.style.padding = "12px";
      }
      
      var elems = document.getElementsByClassName("a");
      for(var i=0; i<elems.length; i++)
      {
         elems[i].style.backgroundColor = "red";
         changeStyle(elems[i]);
      }
      
      var elems = document.getElementsByClassName("b");
      for(var i=0; i<elems.length; i++)
      {
         elems[i].style.backgroundColor = "purple";
         changeStyle(elems[i]);
      }
      
      var elems = document.getElementsByClassName("c");
      for(var i=0; i<elems.length; i++)
      {
         elems[i].style.backgroundColor = "blue";
         changeStyle(elems[i]);
      }
      
      var elems = document.getElementsByClassName("d");
      for(var i=0; i<elems.length; i++)
      {
         elems[i].style.backgroundColor = "gray";
         changeStyle(elems[i]);
      }
   </script>
   
</body>
</html>

If you already know, that the document has a single element with specified or given class name, then you can directly proceed like:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The value is <span class="cc"></span>.</p>
   
   <script>
      document.getElementsByClassName("cc")[0].innerHTML = 10;
   </script>
   
</body>
</html>

Output

The value is .

Get Elements by Class Name inside an Element in JavaScript

To access or get only those elements with specified class name, that are inside some particular element. That is, to get all elements having redTxt class, that are available in an element with id value myDiv, use the following code:

document.getElementById('myDiv').getElementsByClassName('redTxt')

For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p class="redTxt">This is para one</p>
   <div id="myDiv">
      <p class="redTxt">This is para two</p>
      <p class="redTxt">This is para three</p>
   </div>
   <p class="redTxt">This is para four</p>
   
   <script>
      var elems = document.getElementById('myDiv').getElementsByClassName('redTxt');
      for(i=0; i<elems.length; i++)
      {
         elems[i].style.color = "red";
      }
   </script>
   
</body>
</html>

Output

This is para one

This is para two

This is para three

This is para four

See the output, only elements with class redTxt, available inside another element with id myDiv, will be applied red colored style to it.

And if you want to get first element with specified class name, available inside another element having some specified value like id, then proceed in this general way:

document.getElementById('myDiv').getElementsByClassName('redTxt')[0]

Get All Elements with Two Given Class Names

To get all elements having any two classes say red and x, then use the following JavaScript code:

document.getElementsByClassName('red x')

JavaScript Online Test

« Previous Tutorial Next Tutorial »