Element : méthode getAttribute()
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 juillet 2015.
La méthode getAttribute() de l'interface Element retourne la valeur d'un attribut défini sur l'élément.
Si l'attribut donné n'existe pas, la valeur retournée est null.
Si vous avez besoin d'inspecter les propriétés du nœud Attr, vous pouvez utiliser la méthode getAttributeNode() à la place.
Syntaxe
getAttribute(attributeName)
Paramètres
attributeName-
Le nom de l'attribut dont on souhaite obtenir la valeur.
Valeur de retour
Une chaîne de caractères contenant la valeur de attributeName si l'attribut existe, sinon null.
Exemples
<!-- exemple de div dans un document HTML -->
<div id="div1">Salut champion !</div>
const div1 = document.getElementById("div1");
// <div id="div1">Salut champion !</div>
const exempleAttr = div1.getAttribute("id");
// "div1"
const lang = div1.getAttribute("lang");
// null
Description
Sensibilité à la casse
Lorsqu'elle est appelée sur un élément HTML dans un DOM identifié comme un document HTML,
la méthode getAttribute() met son argument en minuscules avant de continuer.
Références de caractères décodées dans les valeurs des attributs
Les références de caractères HTML dans le code source d'un attribut (par exemple, <, & ou <) sont décodées par le parseur HTML lorsque le document est analysé, donc getAttribute() retourne la valeur décodée, et non la source originale.
Étant donné :
<div id="exemple" data-payload="<b>salut</b>"></div>
l'appel document.getElementById("exemple").getAttribute("data-payload") retourne la chaîne de caractères "<b>salut</b>".
Traiter la valeur de retour de getAttribute() comme du HTML déjà échappé est dangereux. Si vous lisez un attribut contenant des données qui ne sont pas fiables, puis que vous l'assignez à innerHTML ou l'insérez dans le document en tant que balisage, toutes les références HTML utilisées pour échapper les caractères spéciaux sont déjà décodées, et le résultat peut être exploité pour des attaques par script inter-site (XSS).
Utilisez textContent (ou une autre API sûre pour le texte) pour les données qui ne sont pas fiables au lieu de innerHTML.
Retrouver des valeurs uniques
Pour des raisons de sécurité, les nombres uniques CSP provenant de sources qui ne sont pas des scripts (comme les sélecteurs CSS) et les appels à .getAttribute("nonce") sont masqués.
let nombreUnique = script.getAttribute("nonce");
// retourne une chaîne de caractères vide
Au lieu de récupérer le nombre unique à partir de l'attribut de contenu, utilisez la propriété nonce :
let nombreUnique = script.nonce;
Spécifications
| Spécification |
|---|
| DOM # ref-for-dom-element-getattribute① |
Compatibilité des navigateurs
Voir aussi
- La méthode
Element.hasAttribute() - La méthode
Element.setAttribute() - La méthode
Element.removeAttribute() - La méthode
Element.toggleAttribute()