[fr] use const instead of var in code examples (#22879)

* Update index.md Use `const` instead of `var` * Update index.md * updt: upgrading contnent to the last en_US version * fix: typos * updt: commit version * updt: content and notes * updt: links * rem: macros to link * Apply suggestions from code review Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com> --------- Co-authored-by: tristantheb <tristantheb@users.noreply.github.com> Co-authored-by: SphinxKnight <SphinxKnight@users.noreply.github.com> Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com>
mdn · Oct 10, 2024 · d85c322 · d85c322
1 parent b24faca
commit d85c322
Showing 1 changed file with 46 additions and 39 deletions.
diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md
@@ -1,102 +1,109 @@
 ---
-title: document.getElementById
+title: "Document : La méthode getElementById()"
+short-title: getElementById()
 slug: Web/API/Document/getElementById
+l10n:
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
 {{ ApiRef("DOM") }}
 
-La méthode **`getElementById()`** 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.
+La méthode **`getElementById()`** de l'interface [`Document`](/fr/docs/Web/API/Document) renvoie un objet [`Element`](/fr/docs/Web/API/Element) représentant l'élément dont la propriété [`id`](/fr/docs/Web/API/Element/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.
 
-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")}}.
+Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser [`querySelector()`](/fr/docs/Web/API/Document/querySelector) pour trouver l'élément en utilisant un [sélecteur](/fr/docs/Glossary/CSS_Selector).
+
+> [!NOTE]
+> Les identifiants doivent être uniques à l'intérieur d'un document. Si deux éléments ou plus — d'un document — ont le même ID, cette méthode renvoie le premier élément trouvé.
 
 ## Syntaxe
 
-```js
-var element = document.getElementById(id);
+```js-nolint
+getElementById(id)
 ```
 
+> [!NOTE]
+> La capitalisation de `"Id"` dans le nom de cette méthode _doit_ être correcte pour que le code fonctionne&nbsp;; `getElementByID()` n'est _pas_ valide et ne fonctionnera pas, aussi naturel que cela puisse paraître.
+
 ### Paramètres
 
 - `id`
-  - : L'ID (_identifiant)_ 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é.
+  - : L'identifiant (_ID_) de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique&nbsp;; un seul élément peut avoir un ID donné.
 
 ### Valeur de retour
 
-Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou `null` si aucun n'a été trouvé dans le document.
+Un objet [`Element`](/fr/docs/Web/API/Element) décrivant l'objet élément du DOM correspondant à l'identifiant (_ID_) spécifié ou `null` si aucun n'a été trouvé dans le document.
 
-## Exemple
+## Exemples
 
-### Contenu HTML
+### HTML
 
 ```html
-<html>
+<html lang="fr">
   <head>
-    <title>getElementById example</title>
+    <title>exemple de getElementById</title>
   </head>
   <body>
-    <p id="para">Some text here</p>
-    <button onclick="changeColor('blue');">blue</button>
-    <button onclick="changeColor('red');">red</button>
+    <p id="para">Un peu de texte ici</p>
+    <button onclick="changerCouleur('blue');">bleu</button>
+    <button onclick="changerCouleur('red');">rouge</button>
   </body>
 </html>
 ```
 
-### Contenu JavaScript
+### JavaScript
 
 ```js
-function changeColor(newColor) {
-  var elem = document.getElementById("para");
-  elem.style.color = newColor;
+function changerCouleur(nouvelleCouleur) {
+  const paragraphe = document.getElementById("para");
+  paragraphe.style.color = nouvelleCouleur;
 }
 ```
 
 ### Résultat
 
-{{ EmbedLiveSample('Exemple', 250, 100) }}
+{{ EmbedLiveSample('Exemples', 250, 120) }}
 
 ## Notes d'utilisation
 
-L'écriture de la lettre capitale de «&nbsp;Id&nbsp;» dans le nom de cette méthode _doit_ être respectée pour que le code fonctionne ; `getElementByID()` n'est pas valide et ne fonctionnera _pas_, même si elle semble naturelle.
-
-Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ 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.
+Contrairement à d'autres méthodes de recherche d'éléments, comme [`Document.querySelector()`](/fr/docs/Web/API/Document/querySelector) et [`Document.querySelectorAll()`](/fr/docs/Web/API/Document/querySelectorAll), `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y a pas besoin d'avoir une version «&nbsp;locale&nbsp;» de la fonction.
 
-## Autre exemple
+### Exemple
 
 ```html
 <!doctype html>
-<html>
+<html lang="fr">
   <head>
     <meta charset="UTF-8" />
     <title>Document</title>
   </head>
   <body>
     <div id="parent-id">
-      <p>hello word1</p>
-      <p id="test1">hello word2</p>
-      <p>hello word3</p>
-      <p>hello word4</p>
+      <p>bonjour tout le monde1</p>
+      <p id="test1">bonjour tout le monde2</p>
+      <p>bonjour tout le monde3</p>
+      <p>bonjour tout le monde4</p>
     </div>
     <script>
-      var parentDOM = document.getElementById("parent-id");
-      var test1 = parentDOM.getElementById("test1");
-      //erreur de lancement
-      //TypeError inattendu : parentDOM.getElementById n'est pas une fonction
+      const parentDOM = document.getElementById("parent-id");
+      const test1 = parentDOM.getElementById("test1");
+      // erreur de lancement
+      // TypeError inattendu : parentDOM.getElementById n'est pas une fonction
     </script>
   </body>
 </html>
 ```
 
 S'il n'y a pas d'élément avec l'identifiant (`id`) fourni, cette fonction retourne `null`. À noter que le paramètre `id` est sensible à la casse, ainsi `document.getElementById("Main")` retournera `null` au lieu de l'élément `<div id="main">` étant donné que «&nbsp;M&nbsp;» et «&nbsp;m&nbsp;» sont différents pour cette méthode.
 
-**Les éléments absents du document** ne sont pas cherchés par `getElementById()`. 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 `getElementById()` :
+Les éléments absents du document ne sont pas cherchés par `getElementById()`. 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 [`Node.insertBefore()`](/fr/docs/Web/API/Node/insertBefore) ou une méthode similaire avant de pouvoir y accéder avec `getElementById()`&nbsp;:
 
 ```js
-var element = document.createElement("div");
+const element = document.createElement("div");
 element.id = "testqq";
-var el = document.getElementById("testqq"); // el vaudra null !
+const el = document.getElementById("testqq"); // el vaudra null !
 ```
 
-**Les documents non-HTML.** Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom «&nbsp;id&nbsp;» n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/XHTML) ou [XUL](/fr/XUL). Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`.
+Dans des documents non-HTML, les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom «&nbsp;id&nbsp;» n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/docs/Glossary/XHTML), XUL, et d'autres. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`.
 
 ## Spécifications
 
@@ -108,6 +115,6 @@ var el = document.getElementById("testqq"); // el vaudra null !
 
 ## Voir aussi
 
-- {{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.
-- {{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme `'div.myclass'`
-- [xml:id](/fr/xml/xml:id) 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).
+- L'interface [`Document`](/fr/docs/Web/API/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.
+- La méthode [`Document.querySelector()`](/fr/docs/Web/API/Document/querySelector) pour utiliser des sélecteurs avec des requêtes comme `'div.myclass'`.
+- La méthode [`Document.evaluate()`](/fr/docs/Web/API/Document/evaluate) qui dispose d'une méthode utilitaire pour sélectionner par `xml:id` dans les documents [XHTML](/fr/docs/Glossary/XHTML).