 |
Recuperar un atributo de un elemento (getAttribute)
Recuperar un atributo de un elemento (getAttribute)
El método getAttribute() devuelve el valor del atributo especificado en el elemento. Si el atributo especificado no existe, el valor retornado puede ser tanto null como una cadena vacía
El método getAttribute() devuelve el valor del atributo con el nombre especificado, de un elemento.
Consejo: utilice el método getAttributeNode() si desea devolver el atributo como un objeto Attr.
Sintaxis
var atributo = element.getAttribute(nombreAtributo);
Parámetros
- atributo es una cadena que contiene el valor del atributo nombreAtributo.
- nombreAtributo es el nombre del atributo del cual se quiere obtener el valor.
Ejemplo
Obtenga el valor del atributo de clase de un elemento <h1>:
<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
color: red;
}
</style>
</head>
<body>
<h1 class="democlass">Hola Mundo</h1>
<p>Haga click en el botón para mostrar el valor del atributo de clase del elemento h1.</p>
<button onclick="myFunction()">Probar</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByTagName("H1")[0].getAttribute("class");
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Ejemplo
Obtenga el valor del atributo de destino de un elemento <a>:
<!DOCTYPE html>
<html>
<body>
Lea sobre el <a id="myAnchor" href="dom_obj_attributes.asp" target="_blank">objeto Attr</a>.
<p>Haga click en el botón para mostrar el valor del atributo de destino del enlace de arriba.</p>
<button onclick="myFunction()">Probar</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAnchor").getAttribute("target");
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Ejemplo
Obtenga el valor del atributo de evento onclick de un elemento <button>:
<!DOCTYPE html>
<html>
<body>
<p>Haga clic en el botón para mostrar el valor del atributo onclick del elemento del botón.</p>
<button id="myBtn" onclick="myFunction()">Probar</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myBtn").getAttribute("onclick");
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Si queremos conocer el valor de un atributo de un nodo de tipo elemento lo podemos hacer llamando al método getAttribute.
El siguiente ejemplo recupera el valor de la propiedad href de un ancla.
pagina.html
<!DOCTYPE html> <html> <head> <title>Problema</title> <script src="funciones.js"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <a id="enlace" href="http://www.google.com.ar">Google.</a><br> <input type="button" value="Recuperar atributo href" onClick="recuperarAtributo()"> <br> </body> </html>
El código javascript es:
function recuperarAtributo()
{
var puntero=document.getElementById('enlace');
alert(puntero.getAttribute('href'));
}
Como podemos observar, primero recuperamos una referencia al nodo elemento que queremos procesar:
var puntero=document.getElementById('enlace');
y luego accedemos por esta referencia al método getAttribute pasando como parámetro el nombre de la propiedad que queremos recuperar:
alert(puntero.getAttribute('href'));