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