HTML | DOM id Property - GeeksforGeeks

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

Recommended Posts: