javascript
  1. javascript-getelementbyid
PreviousNext

JavaScript getElementById

The getElementById method is one of the most commonly used methods in JavaScript. It is used to retrieve an element from the HTML document based on its unique identifier (ID).

Syntax

document.getElementById(id)
  • document: A reference to the document object.
  • getElementById: Method used to retrieve an element based on its unique ID.
  • id: A string value which represents the ID of the desired HTML element.

Example

Suppose we have an HTML document with the following code:

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript getElementById Example</title>
   </head>
   <body>
      <h1 id="mainHeading">Hello World</h1>
      <p id="para1">This is a paragraph.</p>
      <button id="myButton" onclick="changeText()">Change Text</button>
      <script src="script.js"></script>
   </body>
</html>

We can retrieve the element with ID "mainHeading" using the following JavaScript code:

var heading = document.getElementById("mainHeading");

Output

The above JavaScript code will return a reference to the HTML element with ID "mainHeading". We can use this reference to access or manipulate its properties and methods.

For example, to change the text of the "mainHeading" element, we can use:

heading.innerHTML = "New Heading Text";


<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript getElementById Example</title>
   </head>
   <body>
      <h1 id="mainHeading">Hello World</h1>
      <p id="para1">This is a paragraph.</p>
      <button id="myButton" onclick="changeText()">Change Text</button>

      <!-- Inline JavaScript code -->
      <script>
        // Function to change the text content of elements with specific IDs
        function changeText() {
          // Access the Document Object Model (DOM) and change the content of elements
          document.getElementById("mainHeading").innerHTML = "New Heading!";
          document.getElementById("para1").innerHTML = "This is a new paragraph text.";
        }
      </script>
   </body>
</html>
Try Playground

Explanation

The getElementById method is used to retrieve an element from the HTML document based on its unique ID. It returns a reference to the HTML element if it exists, otherwise it returns null.

We can use this reference to access or manipulate the properties and methods of the HTML element. For example, we can change the content, attributes, style, and other properties of the element programmatically.

Use

The getElementById method is commonly used to:

  • Retrieve and modify the content of an HTML element.
  • Retrieve and modify the attributes of an HTML element.
  • Control the visibility and style of an HTML element.
  • Attach event handlers to an HTML element.
  • Create and append new HTML elements to the document.

Important Points

  • The ID attribute of an HTML element must be unique within the document.
  • The getElementById method is case-sensitive, so make sure to use the exact ID value when calling it.
  • If the ID attribute does not exist or is duplicated, the method will return null.

Summary

The getElementById method is a powerful tool in JavaScript that allows us to retrieve an HTML element based on its unique ID. This method is widely used to manipulate the content, attributes, style, and other properties of HTML elements. It is an essential skill for any JavaScript developer who works with web applications.

Document ObjectgetElementsByClassName()
Published on: