1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
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");
//=> <div id="div1">Hi Champ!</div>
const attributID = div1.getAttribute("id");
//=> "div1"
cont alignement = div1.getAttribute("align");
//=> 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>
|
