Skip to content
Related Articles

Related Articles

JavaScript getElementsByClassName() Vs getElementById() Method
  • Last Updated : 23 Dec, 2020

getElementsByClassName() Method: This method returns an object containing all with the specified class name, as a collection of HTML Collection object representing a collection of the nodes. The elements returned can be accessed using by its index starting from zero.

Syntax:

document.getElementsByClassName("class_name");

Parameters: The class name of the elements that you want to get.

Return Value: This function returns the HTML Collection object.

getElementById() Method: This method returns the element that has the ID attribute with the specified value. It is the most used HTML DOM method to manipulate, or get info from, an element on your document.



Syntax:

document.getElementById("id_name");

Parameters: This function accepts a single parameter i.e. element ID and it is used to hold the ID of the element.

Return Value: This function returns the ID attribute’s value of the element.

Below example illustrates the differences between getElementsByClassName() and getElementById() methods:

Example 1: This example uses of getElementsByClassName() method.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
  
        body {
            text-align: center;
        }
  
        button {
            background-color: black;
            color: white;
            width: 300px;
            padding: 10px;
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM getElementByClassName() Method</h2>
  
    <div>
        <button onclick="yellow()" class="black yellow">
            Click to change to yellow button
        </button><br>
        <button onclick="green()" class="green">
            Click to change to green button
        </button><br>
    </div>
  
    <script>
        function yellow() {
            document.getElementsByClassName('yellow')[0]
                .style.backgroundColor = 'yellow';
        }
  
        function green() {
            var elements = document
                .getElementsByClassName('green');
  
            for (var i = 0; i < elements.length; i++) {
                elements[i].style.backgroundColor = 'green';
            }
        
    </script>
</body>
  
</html>

Output:

Before clicking on any button:



After clicking on both button:

Example 2: This example uses getElementById() method.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script>
  
        // Function to change the 
        // color of element 
        function color() {
            var demo = document
                .getElementById("heading");
            demo.style.color = "green";
        
    </script>
</head>
  
<body style="text-align:center">
    <h1 id="heading">GeeksforGeeks</h1>
  
    <h2>DOM getElementById() Method</h2>
  
    <!-- Click on the button to change color -->
    <input type="button" onclick="color()" 
        value="Click here to change heading color" />
</body>
  
</html>

Output:

Before clicking the button:

After clicking the button:

Supported Browser: The browsers supported by DOM getElementsByClassName() and getElementById() methods are listed below:

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 3.0
  • Opera 9.5
  • Safari 3.1
My Personal Notes arrow_drop_up
Recommended Articles
Page :