HTML DOM getElementById() Method
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. The element is required to have a unique id, in order to get access to that specific element quickly, & also that particular id should only be used once in the entire document.
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> <!-- Click on the button to change color --> <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> <!-- Click here to change content --> <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
Please Login to comment...