initial commit

1 files changed, 148 insertions, 0 deletions

diff --git a/files/fr/web/api/document/getelementbyid/index.html b/files/fr/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..eb8a78ee99
--- /dev/null
+++ b/files/fr/web/api/document/getelementbyid/index.html
@@ -0,0 +1,148 @@
+---
+title: document.getElementById
+slug: Web/API/Document/getElementById
+tags:
+  - API
+  - DOM
+  - Document
+  - Elements
+  - Identifiant
+  - Méthodes
+translation_of: Web/API/Document/getElementById
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La méthode <code><strong>getElementById()</strong></code> de {{domxref("Document")}} renvoie un objet  {{domxref("Element")}} représentant l'élément dont la propriété  {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.</p>
+
+<p>Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><em>var element</em> = document.getElementById(<em>id</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>L'ID (<em>identifiant)</em> de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.</dd>
+ <dt>
+ <h3 id="Valeur_de_retour">Valeur de retour</h3>
+ </dt>
+</dl>
+
+<p>Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou <code>null</code> si aucun n'a été trouvé dans le document.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>getElementById example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>para<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Some text here<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeColor(<span class="punctuation token">'</span>blue<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>blue<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeColor(<span class="punctuation token">'</span>red<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>red<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">changeColor</span><span class="punctuation token">(</span>newColor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'para'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  elem<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> newColor<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Notes" name="Notes">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example1', 250, 100) }}</p>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p>L'écriture de la lettre capitale de « Id » dans le nom de cette méthode <em>doit</em> être respectée pour que le code fonctionne ; <code>getElementByID()</code> n'est pas valide et ne fonctionnera <em>pas</em>, même si elle semble naturelle.</p>
+
+<p>Contrairement à d'autres méthodes de recherche d'éléments, comme  {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, <code>getElementById</code> est uniquement disponible comme méthode de l'objet global <code>document</code> et <em>n'est pas</em> disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.</p>
+
+<h2 id="Exemple_2">Exemple</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Document<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parent-id<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>hello word2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word3<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word4<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+        <span class="keyword token">var</span> parentDOM <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parent-id'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">var</span> test1<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'test1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="comment token">//</span></span></code><span class="short_text" id="result_box" lang="fr"><span>erreur de lancement</span></span> <code class="language-html"><span class="language-javascript script token">
+        <span class="comment token">//</span></span></code><span id="result_box" lang="fr"><span>TypeError inattendu </span></span><span lang="fr"><span>: parentDOM.getElementById n'est pas une fonction</span></span> <code class="language-html"><span class="language-javascript script token">
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>S'il n'y a pas d'élément avec l'<code>id</code> fourni, cette fonction retourne <code>null</code>. A noter que le paramètre <code>id</code> est sensible à la casse, ainsi<code> document.getElementById("Main")</code> retournera <code>null</code> au lieu de l'élément <code>&lt;div id="main"&gt;</code> étant donné que "M" et "m" sont différents pour cette méthode.</p>
+
+<p><strong>Les éléments absents du document</strong> ne sont pas cherchés par <code>getElementById()</code>. Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec <code>getElementById()</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+element<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">'testqq'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'testqq'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// el vaudra null !</span></code></pre>
+
+<p><strong>Les documents non-HTML.</strong> Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut <code>id</code> est défini comme étant de type ID dans les langages courants comme <a href="/fr/XHTML" title="fr/XHTML">XHTML</a> ou <a href="/fr/XUL" title="fr/XUL">XUL</a>. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer <code>null</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale de l'interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Remplace DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Remplace DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Remplacera DOM 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId">getElementById</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer un <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.getElementById")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.</li>
+ <li>{{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme <code>'div.myclass'</code></li>
+ <li><a href="/fr/xml/xml:id" title="fr/xml/id">xml:id</a> dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).</li>
+</ul>