.png)
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
.png)
