HTML DOM getElementById() Method
Last Updated :
30 Jan, 2024
The getElementById() method returns the elements that have given an ID which is passed to the function. This function is a widely used HTML DOM method in web designing to change the value of any particular element or get a particular element. If the passed ID to the function does not exist then it returns null.
Note: Each ID needs to be unique. If there are multiple elements with the same ID, only the first one will be returned.
Syntax:
document.getElementById( element_ID )
Parameter:
This function accepts single parameter element_ID which is used to hold the ID of the element.
Return Value:
It returns the object of the given ID. If no element exists with the given ID then it returns null.
Example 1: This example describes the getElementById() method where element_id is used to change the color of the text on clicking the button.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM getElementById() Method
</ title >
< script >
// Function to change the color of element
function geeks() {
var demo = document.getElementById("geeks");
demo.style.color = "green";
}
</ script >
</ head >
< body style = "text-align:center" >
< h1 id = "geeks" >GeeksforGeeks</ h1 >
< h2 >DOM getElementById() Method</ h2 >
< input type = "button" onclick = "geeks()"
value = "Click here to change color" />
</ body >
</ html >
|
Output:
getElementById() Method
Example 2: This example describes the getElementById() method where the element_id is used to change the content on clicking the button.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM getElementById() Method
</ title >
< script >
// Function to change content of element
function geeks() {
var demo = document.getElementById("geeks");
demo.innerHTML = "Welcome to GeeksforGeeks!";
}
</ script >
</ head >
< body style = "text-align:center" >
< h1 >GeeksforGeeks</ h1 >
< h2 >DOM getElementById() Method</ h2 >
< h3 id = "geeks" >Hello Geeks!</ h3 >
< input type = "button"
onclick = "geeks()"
value = "Click here to change content" />
</ body >
</ html >
|
Output:
getElementById() Method
Supported Browsers: The browser supported by DOM getElementById() method are listed below:
- Google Chrome 1.0
- Internet Explorer 5.5
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 7.0
- Safari 1.0
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...