JavaScript – document getElementById


What is document.getElementById() method in Javascript ?

getElementById() method returns the element which have ID attribute with the specified value in the HTML document.

getElementById() method returns null if no ID is specified for HTML elements.

getElementById() method returns the first element if more than one element specified with same ID.

getElementById() method accepts only single parameter.

Why we use getElementById() ?

getElementById() method is used to access the form elements or document elements and manipulate the elements.

This is the most commonly used method used to load dynamic content in the web pages.

Online course javascript !!!

Click to Learn More about – Javascript online learning

Syntax :

document.getElementById("Element_ID");

document :

This refers the current document (ie) HTML page.

Element_ID :

This refers to the “id” of the element

return value :

This function returns the element of the “id” passed as the parameter.



If the “id” element doesn’t exists, It returns “null”

1. document.getElementById(“Element_ID”);

In this document HTML paragraph tags elements are fetched and different colors to the paragraphs are applied.

Suppose consider the paragraphs P1,P2,P3,P4,P5 by default the text color is “black”.

By applying document.getElementById() function the “id” of each element is got and the style property is applied.

Example :

<!DOCTYPE html>
<html>

	<head>
		<title>Our title</title>
		<style>
		#dId-1{
			width: 30%;
			height: 30%;
			text-align:center;
			padding: 20px;
			margin: 10px;
			border: 2px solid green;
			font-size: 20px;
		}
		#dId-2{
			width: 30%;
			height: 30%;
			margin: 10px;
			border: 2px solid green;
			padding: 20px;
			font-size: 20px;
		}
		.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
			width:200px;
			height:30px;
			font-size: 20px;
		}
		</style>
		<script>
			function changeColorP1() { 
			var pid1 = document.getElementById("p1"); 
		pid1.style.color = "red"; 
		}
			
			function changeColorP2() { 
                        var pid2 = document.getElementById("p2"); 
                        pid2.style.color = "green"; 
                        }
			
			function changeColorP3() { 
                        var pid3 = document.getElementById("p3"); 
                        pid3.style.color = "yellow"; 
                        }
			
			function changeColorP4() { 
                        var pid4 = document.getElementById("p4"); 
                        pid4.style.color = "blue"; 
                        }
			
			function changeColorP5() { 
                        var pid5 = document.getElementById("p5"); 
                        pid5.style.color = "brown"; 
                        }
		</script>
	</head>
	<body>
		<div id="dId-1">
			<p id="p1">This is Paragraph1 P1</p>
			<p id="p2">This is Paragraph2 P2</p>
			<p id="p3">This is Paragraph3 P3</p>
			<p id="p4">This is Paragraph4 P4</p>
			<p id="p5">This is Paragraph5 P5</p>
		</div>
		<div id="dId-2">
			<p>
			<button class="b1" onclick="changeColorP1()">P1 Change Color</button> Change Color P1 to Red 
			</p>
			<p>
			<button class="b2" onclick="changeColorP2()">P2 Change Color</button> Change Color P1 to Green 
			</p>
			<p>
			<button class="b3" onclick="changeColorP3()">P3 Change Color</button> Change Color P1 to Yellow
			</p>
			<p>
			<button class="b4" onclick="changeColorP4()">P4 Change Color</button> Change Color P1 to Blue
			</p>
			<p>
			<button class="b5" onclick="changeColorP5()">P5 Change Color</button> Change Color P1 to Brown
			</p>
			<div>
	</body>
</html>

Output :

1. Before the executing the function

2. After the executing the function