HTML DOM id Property

Last Updated : 31 Mar, 2023

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.

html

<!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.

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM id Property 
    </title> 
  
</head> 
  
<body style="text-align: 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> 
</body> 
  
</html> 