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 propriété Element.attributes renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une NamedNodeMap, pas un tableau (Array), aussi il n'a pas de méthodes Array et l'index de noeud Attr peuvent différer entre les navigateurs. Pour être plus précis, les attributs sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.

Syntaxe

js
var attr = element.attributes;

Exemple

Exemples basiques

js
// récupère le premier élément <p> du document
var para = document.getElementsByTagName("p")[0];
var attr = para.attributes;

Énumération des attributs d'éléments

L'indexation numérique est utile pour parcourir tous les attributs d'un élément. L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.

html
<!doctype html>

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

        // D'abord, vérifier que le "paragraph" a quelques attributs
        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 attributes to show";
        }
      }
    </script>
  </head>

  <body>
    <p id="paragraph">Sample Paragraph</p>
    <form action="">
      <p>
        <input
          type="button"
          value="Show first attribute name and value"
          onclick="listAttributes();" />
        <input id="result" type="text" value="" />
      </p>
    </form>
  </body>
</html>

Spécifications

Specification
DOM Standard
# dom-element-attributes

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

  • NamedNodeMap, l'interface de l'objet retourné
  • Considérations de compatibilité entre navigateurs : sur quirksmode (en)