HTML | DOM id Property

Last Updated : 25 Jul, 2019

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

My Personal Notes

Related Articles