What is HTML DOM id Property?

In this article, we will learn HTML DOM id Property,This free HTML tutorial for complete beginners will help you learn HTML from scratch.

HTML DOM id Property - ❤️HTML Tutorials In 2024

Q: How to use HTML DOM id Property in HTML?

The DOM id Property is used to set or return the id of an element i

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> 
        .Beginner { 
            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;"> 
        w3wiki 
    </h1> 
  
    <h2 style="color:green; 
            font-weight:bold; 
            text-align:center"> 
        DOM ID Property 
    </h2> 
  
    <a class="Beginner" id="GFG" href="#"> 
        C programming 
    </a> 
    <a class="Beginner" href=" # "> 
        java 
    </a> 
    <a class="Beginner " href="# "> 
        Ruby 
    </a> 
  
    <button onclick="Beginner() "> 
        Submit 
    </button> 
  
    <p id="SUDO "></p> 
  
    <script> 
        function Beginner() { 
            var x = document 
                .getElementsByClassName("Beginner ")[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;"> 
        w3wiki 
    </h1> 
  
    <h2 style="color:green; 
                font-weight:bold; 
                text-align:center"> 
        DOM ID Property 
    </h2> 
  
    <p> 
        <a id="Beginner" href="#"> 
            w3wiki 
        </a> 
    </p> 
  
    <button onclick="Beginner()">Submit</button> 
  
    <p id="gfg"></p> 
  
    <script> 
        function Beginner() { 
            document.getElementById("Beginner").id = "sudo"; 
            document.getElementById("gfg").innerHTML = 
                "The value of the ID attribute" + 
                "changed from Beginner 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