Element : méthode getAttributeNames()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2018.

En savoir plus
Voir la compatibilité complète

La méthode getAttributeNames() de l'interface Element retourne les noms des attributs de l'élément sous la forme d'un (tableau) Array de chaînes de caractères. Si l'élément n'a pas d'attributs, elle retourne un tableau vide.

Utiliser getAttributeNames() avec getAttribute() est une alternative efficiente et performante pour accéder à Element.attributes.

Les noms retournés par getAttributeNames() sont des noms d'attributs qualifiés, ce qui signifie que les attributs avec un préfixe d'espace de noms ont leurs noms retournés avec ce préfixe d'espace de noms (et non l'espace de noms réel), suivi d'un deux-points, suivi du nom de l'attribut (par exemple, xlink:href), tandis que les attributs sans préfixe d'espace de noms ont leurs noms retournés tels quels (par exemple, href).

Syntaxe

getAttributeNames()

Pour un attribut qui a un préfixe d'espace de noms, getAttributeNames() retourne ce préfixe d'espace de noms ainsi que le nom de l'attribut.
Pour un attribut qui n'a pas de préfixe d'espace de noms, getAttributeNames() retourne juste le nom de l'attribut, tel quel.

Il est important de comprendre que :

Un attribut peut être présent dans le DOM avec un espace de noms mais sans préfixe d'espace de noms.
Pour un attribut dans le DOM qui a un espace de noms mais sans préfixe d'espace de noms, getAttributeNames() retourne juste le nom de l'attribut, sans indication que l'attribut est dans un espace de noms.

L'exemple ci-dessous inclut un cas « d'attribut avec un espace de noms mais sans préfixe d'espace de noms ».

const element = document.createElement("a");

// définit l'attribut "href" sans espace de noms et sans préfixe d'espace de noms
element.setAttribute("href", "https://example.com");
// définit l'attribut "href" avec un espace de noms et aussi le préfixe d'espace de noms "xlink"
element.setAttributeNS(
  "http://www.w3.org/1999/xlink",
  "xlink:href",
  "https://example.com",
);
// définit l'attribut "show" avec un espace de noms mais sans préfixe d'espace de noms
element.setAttributeNS("http://www.w3.org/1999/xlink", "show", "new");

// Parcourt les attributs de l'élément
for (const nom of element.getAttributeNames()) {
  const valeur = element.getAttribute(nom);
  console.log(nom, valeur);
}

// journaux :
// href https://example.com
// xlink:href https://example.com
// show new