How to use Javascript document getElementById() Method

Javascript document getElementById() Method

In this tutorial ,you will learn to about javascript document getElementById() and how to use javascript document.getElementById().The document.getElementById() method returns an html element with an "id" that matches the specified string.


if the specified id has no element the document.getElementById() returns null.

In the Html document, the id is a unique element that is easily accessed by the javascript and jquery for example document.getElementById().


var s= document.getElementById(id);

In the above syntax, the id is a string value that represents the id of the element to select.

The id is the unique element and case-sensitive because the id represents the select of the design or output.

Read also:

Javascript to change the background colour font checkbox

Function in Javascript

How to create a accordion ui design examples in html

How to add html responsive table in blogger and wordpress 


For example, Html div id ="container" and you mention the id has Container both are different.

If you mention Html document has multiple elements with the same id, it returns the first element.

Javscript getElementById() method Example: 


<script type="text/javascript">
function changecolor(color){
const s = document.getElementById('colortest'); = color;
<p id="colortest">welcome to dailyaspirants</p>
<input type="button" value="red" onclick="changecolor('red')"/>
<input type="button" value="green" onclick="changecolor('green')"/>


Javascript document getElementById() Method

Javascript document getElementById() Method

After the element selected, you can change styles and manipulate its attributes and run on your broswer.

If the javascript document.getElementById() returns a DOM element and the id is not matching element it is return null on console.log().

I hope you will learn javascript document.getElementById() and how it work on the broswer.
Previous Post Next Post