---
title: element.getAttribute
slug: Web/API/Element/getAttribute
tags:
  - API
  - DOM
  - Element
  - Method
  - Méthode
  - Reference
translation_of: Web/API/Element/getAttribute
---
<p>{{APIRef("DOM")}}</p>

<p><code>getAttribute</code> renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit <code>null</code> soit <code>""</code> (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="eval"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>)
</pre>

<p>où</p>

<ul>
 <li><code><em>attribut</em></code> est une chaine contenant la valeur de l'attribut <code><em>nom_attribut</em></code>.</li>
 <li><code><em>nom_attribut</em></code> est le nom de l'attribut dont on désire connaitre la valeur.</li>
</ul>

<h2 id="Exemple">Exemple</h2>

<p>Soit l'HTML :</p>

<pre class="notranslate">const div1 = document.getElementById("div1");</pre>

<p>Exemple de JavaScript :</p>

<pre class="eval">const div1 = document.getElementById("div1");
//=&gt; &lt;div id="div1"&gt;Hi Champ!&lt;/div&gt;

const attributID = div1.getAttribute("id");
//=&gt; "div1"

cont alignement = div1.getAttribute("align");
//=&gt; null
</pre>

<h2 id="Notes">Description</h2>

<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>

<p>Le paramètre <code>nom_attribut</code> est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.</p>

<h3 id="Attributs_inexistants">Attributs inexistants</h3>

<p>À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient <code>null</code> lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide <code>""</code>, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttribute()</code> s'il est possible que l'attribut n'existe pas sur l'élément spécifié.</p>

<h3 id="Récupération_de_nonces">Récupération de nonces</h3>

<p>Pour des raisons de sécurité, les <em>nonces</em> <a href="/fr/docs/Web/HTTP/CSP">CSP</a> des sources autres que des scripts, telles que les feuilles de style CSS, et les appels <code>.getAttribute("nonce")</code> sont interdits.</p>

<pre class="brush: js example-bad">let nonce = script.getAttribute("nonce");
// renvoie une chaine vide</pre>

<p>Plutôt que de tenter de lire le <em>nonce</em> via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :</p>

<pre class="brush: js">let nonce = script.nonce;</pre>

<h2 id="Sp.C3.A9cification">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><strong>Spécification</strong></td>
   <td><strong>État</strong></td>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Sp.C3.A9cification">Compatibilité des navigateurs</h2>

<div>{{Compat("api.Element.getAttribute")}}</div>