Open In App

HTML DOM id Property

Last Updated : 31 Mar, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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


Similar Reads

HTML DOM lang Property
In HTML document, the lang property is used to set or return the value of the lang attribute of an element. This attribute specifies the language code of the element's content. The element attribute takes "en" for English, "ja" for Japanese, "es" for Spanish, and so on. The default value of this attribute is unknown. Syntax: Get the value of lang:
2 min read
HTML DOM Style backgroundClip Property
The DOM style backgroundClip Property is used to set or return the painting area of the background. Syntax: It is used to return the backgroundClip property.object.style.backgroundClip It is used to set the backgroundClip property. object.style.backgroundClip = "border-box|padding-box|content-box|initial|inherit" Property Values: border-box propert
1 min read
HTML DOM Style borderTop Property
The DOM style borderTop property is used to set or return the three different border-top property such as border-top-width, border-top-style, and border-top-color of an element. Syntax: It returns the borderTop property. object.style.borderTopIt is used to set the borderTop property. object.style.borderTop = "width style color|initial|inherit" Prop
2 min read
HTML | DOM Meter max Property
The DOM Meter max Property is used to set or return the value of the max attribute of a gauge. The max attribute is used to specify the upper bound of the gauge and the value of the max attribute must be greater than the value of the min attribute. It has a default value which is 1. Syntax: It return the max property.meterObject.maxIt is used to se
2 min read
HTML | DOM Input Hidden value Property
The Input Hidden value property in HTML DOM is used to set or return the value of the value attribute of the hidden input field. The value attribute defines the default value of the input hidden field. Syntax: It returns the value property.hiddenObject.valueIt is used to set the value property.hiddenObject.value = text Property Values: This propert
2 min read
HTML DOM Marquee direction Property
The marquee direction property in HTML DOM is used to set or return the value of the direction attribute of the &lt;marquee&gt; tag. Syntax: It is used to return the marquee direction property. marqueeObject.direction; It is used to set the marquee direction property. marqueeObject.direction = "up|down|left|right" Note: This property is depreciated
2 min read
HTML | DOM Textarea autofocus Property
The DOM Textarea autofocus Property is used to set or return whether the element should get focus when the page loads. This property is used to reflect the HTML autofocus attribute. Syntax: It is used to Return the autofocus property. textareaObject.autofocusIt is used to Set the autofocus property. textareaObject.autofocus = true|false Property Va
2 min read
HTML | DOM Style columnGap Property
The DOM Style columnGap property specifies the gap between the columns. Syntax : For return the value: object.style.columnGap For set the value: object.style.columnGap = "length|normal|initial|inherit" Property Values: length: Set the column gap in length unit. normal: The default value of column gap. initial: Sets the default value. inherit: Inher
4 min read
HTML | DOM Input Time autofocus Property
The DOM Input Time autofocus Property in HTML DOM is used to set or return whether the time field should automatically get focus or not when the page loads. This Property is used to reflect the HTML autofocus attribute. Syntax: It returns an autofocus Property. timeObject.autofocus It is used to set the autofocus property. timeObject.autofocus = tr
2 min read
HTML DOM Input Submit formTarget Property
The Input Submit formTarget Property in HTML DOM is used to set or return the value of the formtarget attribute of the submit field. The Target attribute is used to specify whether the submitted result will open in the current window, a new tab or on a new frame. Syntax: It is used to return the formTarget property.submitObject.formTargetIt is used
3 min read
Article Tags :