HTML | DOM id Property
The DOM id Property is used to set or return the id of an element i.e value of the Id Attribute. An ID should be different in a document. It is returned by using the document.getElementById() method.
Syntax
HTMLElementObject.id
Return values: This syntax is used to return the id Property.
HTMLElementObject.id = id
Property: It contains the value of the ID attribute and used to return the ID attribute.
Example-1: Get the ID of the first element.
<!DOCTYPE html> < html > < head > < title > HTML | DOM id Property </ title > < style > .GEEKS { display: block; padding: 5px; background-color: green; color: white; } #GFG { background-color: tomato; } </ style > </ head > < body > < h1 style="color:green; font-weight:bold; text-align:center;"> GeeksForGeeks </ h1 > < h2 style="color:green; font-weight:bold; text-align:center"> DOM ID Property </ h2 > < a class = "GEEKS" id = "GFG" href = "#" > C programming </ a > < a class = "GEEKS" href = " # " > java </ a > < a class = "GEEKS " href = "# " > Ruby </ a > < button onclick = "GEEKS() " > Submit </ button > < p id = "SUDO " ></ p > < script > function GEEKS() { var x = document.getElementsByClassName("GEEKS ")[0].id; document.getElementById("SUDO ").innerHTML = x; } </ script > </ body > </ html > |
Output:
Example-2: Change the value at a particular ID.
<!DOCTYPE html> < html > < head > < title > HTML | DOM id Property </ title > </ head > < body > < center > < h1 style="color:green; font-weight:bold; text-align:center;"> GeeksForGeeks </ h1 > < h2 style="color:green; font-weight:bold; text-align:center"> DOM ID Property </ h2 > < p > < a id = "geeks" href = "#" >GeeksforGeeks</ a > </ p > < button onclick = "geeks()" >Submit</ button > < p id = "gfg" ></ p > < script > function geeks() { document.getElementById("geeks").id = "sudo"; document.getElementById("gfg").innerHTML = "The value of the ID attribute" + "changed from geeks to sudo"; } </ script > </ center > </ body > </ html > |
Output:
Supported Browsers: The browser supported by DOM ID property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari