HTML - DOM getElementById() Method

Quiz

The HTML DOM getElementById() method is used to retrieve an element by passing its id as a parameter to it. In HTML, the Id is an attribute used to specify a unique identifier for an element (e.g., <p id="demo">), where "demo" is an id value of <p> element.

If the id is not unique, only the first element with that id will be returned. If the specified id does not exist, this method will return null.

Before discussing the various examples of this method, let's consider an interactive part that will give you clarity about the various scenarios of this method:

DOM getElementById() Method

Welcome to Tutorialspoint

Hey! This is an HTML paragraph

Syntax

Following is the syntax of the HTML DOM getElementById() method −

document.getElementById(ElementId);

Parameters

This method accepts a single parameter as listed below −

Parameter	Description
ElementId	It represents the id value of an element that you want to locate. It is a case-sensitive string.

Return Value

This method returns the element of the given id, if no id exists with the specified id name it returns null.

Example 1

The following is the basic example of the HTML DOM getElementById() method −

<html>
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p id="demo">Tutorialspoint</p>
<script>
   alert(document.getElementById('demo'));
</script>
</body>
</html>

A pop-up alert will appear with the message "[object HTMLParagraphElement]".

Example 2: Change font Color

We will use the HTML DOM getElementById() method to access an element by its 'id' first, and then we will change the font color using the "style" property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below button to change color.</p>
<button onclick="fun()">Click me</button>
<p id="tp">"Welcome to Tutorials Point.."</p>
<script>
   function fun() {
      let x = document.getElementById("tp");
      x.style.color = "red";
   }
</script>
</body>
</html>

Once the above program is executed, a button will be displayed. When clicked, the font color will change to "green".

Example 3: Display any Text

In the following example, we are displaying a text to <p> element.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below to display a text</p>
<button onclick="fun()">Click me</button>
<p id="tp"></p>
<script>
   function fun() {
      document.getElementById("tp").innerHTML = "Welcome to Tutorials Point";
   }
</script>
</body>
</html>

On executing the above program, a button will appear, once it is clicked, the text "Welcome to Tutorials Point" will be displayed.

Example 4: Change the Font Size

In the following example, the font size of the displayed text will be changed once the button is clicked −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below button to change the font size.</p>
<button onclick="fun()">Click me</button>
<p id="tp">"Welcome to Tutorials Point.."</p>
<script>
   function fun() {
      let x = document.getElementById("tp");
      x.style.fontSize = "24px";
   }
</script>
</body>
</html>

After executing the above program, a button appears on the window screen, once it is clicked the font size will be changed to "24px".

Example 5: Add an EventListener

In the following example, we will access the button element using its id, and then we will add a click event using the addEvenetListener() method, which triggers an alert message −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below button to alert a message </p>
<button id="tp">click me</button>
<script>
   document.getElementById("tp").addEventListener("click", fun);
   function fun() {
      alert("Welcome to Tutorialspoint");
   }
</script>
</body>
</html>

Once the above program is executed a button will be displayed, once it is clicked an alert message "Welcome to Tutorialspoint" will appear on the window screen.

Supported Browsers

Method
getElementByID	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page