Skip to content
Related Articles

Related Articles

HTML | DOM id Property

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jul, 2022

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>
    <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 23
  • Edge 12
  • Internet Explorer 5
  • Firefox 1
  • Opera 12.1
  • Safari 1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!