Element.attributes

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propiedad Element.attributes retorna una colección "viva" cuyos nodos son todos los atributos registrados en el nodo especificado. Es un NamedNodeMap, no un Array, así que no tiene los métodos de Array y los índices de nodo Attr pueden diferir en cada navegador. Más concretamente attributes es un conjunto de pares de cadenas nombre/valor que representan la información relativa a cada atributo.

Sintaxis

var attr = element.attributes;

Ejemplo

Ejemplos básicos

// Obtiene el primer elemento <p> en el documento
var para = document.getElementsByTagName("p")[0];
var atts = para.attributes;

Enumerando atributos de elemtentos

La indexación numérica es útil para recorrer de todos los atributos de un elemento. El siguiente ejemplo corre a través de los atributors del elemento con id "p1" en el documento, e imprime el valor de cada atributo.

html

<!doctype html>

<html>
  <head>
    <title>Attributes example</title>
    <script type="text/javascript">
      function listAttributes() {
        var paragraph = document.getElementById("paragraph");
        var result = document.getElementById("result");

        // Primero, verifiquenmos que el párrafo tiene algún atributo
        if (paragraph.hasAttributes()) {
          var attrs = paragraph.attributes;
          var output = "";
          for (var i = attrs.length - 1; i >= 0; i--) {
            output += attrs[i].name + "->" + attrs[i].value;
          }
          result.value = output;
        } else {
          result.value = "No hay atributos que mostrar";
        }
      }
    </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">Párrafo de ejemplo</p>
    <form action="">
      <p>
        <input
          type="button"
          value="Muestra el nombre cada atributo y su valor"
          onclick="listAttributes();" />
        <input id="result" type="text" value="" />
      </p>
    </form>
  </body>
</html>

Especificaciones

Specification
DOM Standard # dom-element-attributes

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también

NamedNodeMap, la interfaz del objeto retornado.
Consideracións sobre compatibilidad cruzada entre navegadores: en quirksmode