How "getElementByID" works in JavaScript?

Javascript Web Development Front End Technology

This article discusses about how “getElementByID” method work in JavaScript. The getElementByID() method in JavaScript is a document method. When we give a specific string which should match the ID of the HTML element, it returns the element object. Every HTML element can be assigned a unique ID. If two or more elements have the same ID, then the getElementByID() method returns the first element. The getElementByID() method is used for the faster access of an element. It helps us to manipulate an HTML element within our document and is supported by all the modern browsers. If the element is absent, the getElementById() function returns null. In such cases, we can use document.querySelector() which doesn’t require any ID.

Syntax

The syntax for getElementByID() method is −

document.getElementByID(id);

Where, id is the element id which is to be returned. It is case-sensitive. An element object is returned.

Example 1

This is an example program to define the usage of document.getElementById() method.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>A program on how getElementById works in JavaScript</title>
</head>
<body style="text-align: center ;">
   <p> A program to define the usage of document.getElementById </p>
   <p id="desc-docID">One of the most common methods in the HTML DOM is getElementById(). When you want to read or change an HTML element, you use document.getElementById().</p>
   <p id="document-id" style="text-align : center"></p>
   <script>
      let content = document.getElementById('desc-docID').innerHTML;
      document.getElementById('document-id').innerHTML = "The content inside the paragraph with id 'desc-docID' is : "+content;
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Example 2

This is an example program to read or change an HTML element using document.getElementByID() method.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>A program on how getElementById works in JavaScript</title>
</head>
<body style="text-align: center ;">
   <p> A program to define the usage of document.getElementById </p>
   <p id="desc-docID">One of the most common methods in the HTML DOM is getElementById(). When you want to read or change an HTML element, you use document.getElementById().</p>
   <p id="document-id" style="text-align : center"></p>
   <script>
      document.getElementById('desc-docID').style.color = "blue";
      document.getElementById('desc-docID').style.fontStyle = "oblique";
      document.getElementById('desc-docID').style.fontSize = "large";
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 3

This is an example program to point to a non-existing ID that returns NULL using document.getElementByID() method.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>A program on how getElementById works in JavaScript</title>
</head>
<body style="text-align: center ;">
   <p> A program to define the usage of document.getElementById </p>
   <p id="sample"></p>
   <script>
      let content = document.getElementById('demo'); // Pointing to a non-existing ID name returns NULL.
      document.getElementById('sample').innerHTML = 'The content inside the id="demo" is : '+ content;
   </script>
</body>
</html>

On executing the above code, the following output is generated.