La propiedad DOM id se utiliza para establecer o devolver la identificación de un elemento, es decir, el valor del atributo de identificación. Una identificación debe ser diferente en un documento. Se devuelve mediante el método document.getElementById().
Sintaxis
HTMLElementObject.id
Valores devueltos: esta sintaxis se utiliza para devolver la propiedad id.
HTMLElementObject.id = id
Propiedad : contiene el valor del atributo ID y se utiliza para devolver el atributo ID.
Ejemplo-1: Obtenga la ID del primer elemento.
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>
Producción:
Ejemplo-2: cambie el valor en una identificación particular.
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>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM ID se enumeran a continuación:
- Google cromo 23
- Borde 12
- explorador de Internet 5
- Firefox 1
- Ópera 12.1
- Safari 1
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA