HTML DOM getElementById() Method Last Updated : 02 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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() { let 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() MethodExample 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() { let 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() MethodSupported Browsers: The browser supported by DOM getElementById() method are listed below:Google ChromeEdge FirefoxOperaSafari Comment More infoAdvertise with us A ankit15697 Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML | DOM Abbreviation Object The DOM Abbreviation Object is used to represent the HTML <abbr> element. The abbreviation element is accessed by getElementById(). Example 1: html <!DOCTYPE html> <html> <head> <title> HTML DOM Abbreviation Object </title> <script> function myGeeks() { var 1 min read HTML | DOM Style margin Property The DOM Style margin Property is used to sets or returns the margin of an element.We can set the different size of margins for individual sides(top, right, bottom, left).Margin properties can have following values: Length in cm, px, pt, etc.Width % of the element.Margin calculated by the browser: au 2 min read HTML DOM nodeName Property The nodeName property is used to return the name of the specified node as a string. It returns different values for different nodes such as if the node attributes, then the returned string is the attribute name, or if the node is an element, then the returned string is the tag name. It is a read-onl 2 min read HTML DOM textContent Property The textContent property in HTML is used to set or return the text content of the specified node and all its descendants. This property is very similar to nodeValue property but this property returns the text of all child nodes.Syntax: It is used to set the text of node. node.textContent = textIt is 2 min read HTML ondrop Event Attribute The ondrop event attribute is used to drag an element or text and drop it into a valid droppable location or target. The drag and drop is a common feature of HTML 5. There are different events that are used and occur before ondrop event. Events occur on the draggable targetEvents occur on the drop t 3 min read HTML DOM item() Method The item() method is used to return the node at the specified index. The nodes are sorted as they appear in the source code. The index of the node list starts with 0. Syntax:nodelist.item( index )ornodelist[ index ] Parameters: This method accepts single parameter index which is used to hold the ind 2 min read HTML DOM Style borderRight Property The DOM style borderRight property is used to set or return the three different border-right properties such as border-right-width, border-right-style, and border-right-color of an element. Syntax: It returns the borderRight Property.object.style.borderRightIt is used to set the borderRight property 2 min read HTML DOM Style borderTop Property The DOM style borderTop property is used to set or return the three different border-top property such as border-top-width, border-top-style, and border-top-color of an element. Syntax: It returns the borderTop property. object.style.borderTopIt is used to set the borderTop property. object.style.bo 2 min read HTML DOM documentElement Property The DOM documentElement property is used to return the documentElement as an Element Object. It is a read-only property. It returns a <HTML> Element. Syntax:document.documentElement Return Value: It returns the documentElement of the document or an element object. Example: Below program illust 2 min read HTML DOM Style borderLeft Property HTML DOM Style borderLeft property allows manipulation of the left border style of an element via JavaScript. It controls the border's width, style, and color, affecting the element's visual presentation and layout. HTML DOM Style borderLeft Property Syntax:Get the borderLeft Property.object.style.b 2 min read Like