Skip to content
Related Articles

Related Articles

HTML DOM getElementById() Method

View Discussion
Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 25 Nov, 2021

The getElementById() method returns the elements that have given an ID which is passed to the function. This function is a widely used HTML DOM method in web designing to change the value of any particular element or get a particular element. If the passed ID to the function does not exist then it returns null. The element is required to have a unique id, in order to get access to that specific element quickly, & also that particular id should only be used once in the entire document.

Syntax:

document.getElementById( element_ID )

Parameter: This function accepts single parameter element_ID which is used to hold the ID of the element.

Return Value: It returns the object of the given ID. If no element exists with the given ID then it returns null.

Example 1: This example describes the getElementById() method where element_id is used to change the color of the text on clicking the button.

HTML




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

Output:

getElementById() Method

Example 2: This example describes the getElementById() method where the element_id is used to change the content on clicking the button.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        DOM getElementById() Method
    </title>
  
    <script>
  
        // Function to change content of element
        function geeks() {
            var demo = document.getElementById("geeks");
            demo.innerHTML = "Welcome to GeeksforGeeks!";
        }
    </script>
</head>
  
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>DOM getElementById() Method</h2>
    <h3 id="geeks">Hello Geeks!</h3>
  
    <!-- Click here to change content -->
    <input type="button" 
           onclick="geeks()" 
           value="Click here to change content" />
</body>
  
</html>

Output:

getElementById() Method

Supported Browsers: The browser supported by DOM getElementById() method are listed below:

  • Google Chrome 1.0
  • Internet Explorer 5.5
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 7.0
  • Safari 1.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!