JavaScript getElementsByClassName()

The JavaScript getElementsByClassName() method returns an object similar to an array, representing all elements that have a 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 .

The value is .

The value is .

In above example, the following statement:

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

returns all three P (paragraph) elements, whose class name is the 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 the totElements variable. Because elements carry a total three elements, 3 will be initialized to the totElements variable. And using its indexes, I've set 10 as the content of all P elements, one by one, using the 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 the getElementsByClassName() method in JavaScript is:

getElementsByClassName(className)

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

JavaScript getElementsByClassName() Example

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

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p class="codescracker">This is para one</p>
   <p class="codescracker">This is para two</p>
   <p class="codescracker">This is para three</p>
   
   <script>
      var elems = document.getElementsByClassName("codescracker");
      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 elements by their class names and style them 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 the 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 the above block of code, the statement:

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

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

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

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

Since the following three JavaScript codes are responsible for changing the style:

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 a specified or given class name, then you can directly proceed as follows:

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 the specified class name that are inside some particular element. That is, to get all elements having the redTxt class that are available in an element with an id value of 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

Only elements with the class "redTxt," which are available within another element with the id "myDiv," will have a red style applied to them.

And if you want to get the first element with a 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 »


Liked this post? Share it!