Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML DOM id Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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>

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
Last Updated : 31 Mar, 2023
Like Article
Save Article
Similar Reads
Related Tutorials