From d019fe80ba406137782305b52b0e5bb0a37d1f85 Mon Sep 17 00:00:00 2001 From: Christopher Bellanger Date: Thu, 1 Aug 2024 18:19:12 +0200 Subject: [PATCH 1/4] Update index.md Use `const` instead of `var` --- files/fr/web/api/document/getelementbyid/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index 91f66ae2e08d5e..8b8fd925d9168b 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -45,7 +45,7 @@ Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondan ```js function changeColor(newColor) { - var elem = document.getElementById("para"); + const elem = document.getElementById("para"); elem.style.color = newColor; } ``` @@ -77,8 +77,8 @@ Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("

hello word4

@@ -91,9 +91,9 @@ S'il n'y a pas d'élément avec l'identifiant (`id`) fourni, cette fonction reto **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()` : ```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 « 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 `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`. From aabd03d9251691ddef66d94cb0c081a04030ec7c Mon Sep 17 00:00:00 2001 From: Christopher Bellanger Date: Thu, 1 Aug 2024 18:24:33 +0200 Subject: [PATCH 2/4] Update index.md --- files/fr/web/api/document/getelementbyid/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index 8b8fd925d9168b..7d3187812ae144 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -12,7 +12,7 @@ Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez uti ## Syntaxe ```js -var element = document.getElementById(id); +const element = document.getElementById(id); ``` ### Paramètres From e457938cf7ba90f8c12365ee4f5d8ef861e3cde0 Mon Sep 17 00:00:00 2001 From: tristantheb Date: Sun, 11 Aug 2024 13:25:06 +0200 Subject: [PATCH 3/4] updt: upgrading contnent to the last en_US version * fix: typos * updt: commit version * updt: content and notes * updt: links * rem: macros to link --- .../web/api/document/getelementbyid/index.md | 71 ++++++++++--------- 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index 7d3187812ae144..4f148cdc70fa5e 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -1,42 +1,51 @@ --- -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 -const 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 ; `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 ; 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 - getElementById example + exemple de getElementById -

Some text here

- - +

Un peu de texte ici

+ + ``` @@ -44,43 +53,41 @@ Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondan ### Contenu JavaScript ```js -function changeColor(newColor) { - const 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 « Id » 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 [`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 « locale » de la fonction. -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. - -## Autre exemple +### Exemple ```html - + Document
-

hello word1

-

hello word2

-

hello word3

-

hello word4

+

bonjour tout le monde1

+

bonjour tout le monde2

+

bonjour tout le monde3

+

bonjour tout le monde4

@@ -88,7 +95,7 @@ Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref(" 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 `
` étant donné que « M » et « m » 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 {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec `getElementById()` : ```js const element = document.createElement("div"); @@ -96,7 +103,7 @@ element.id = "testqq"; 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 « 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 `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 « 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 `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 @@ const 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). From d7430c4111a8dc46ef668a00a40d787197d56c65 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 10 Oct 2024 14:12:36 +0200 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com> --- files/fr/web/api/document/getelementbyid/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index 4f148cdc70fa5e..40e3f2ccd68b18 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -35,10 +35,10 @@ Un objet [`Element`](/fr/docs/Web/API/Element) décrivant l'objet élément du D ## Exemples -### Contenu HTML +### HTML ```html - + exemple de getElementById @@ -50,7 +50,7 @@ Un objet [`Element`](/fr/docs/Web/API/Element) décrivant l'objet élément du D ``` -### Contenu JavaScript +### JavaScript ```js function changerCouleur(nouvelleCouleur) { @@ -95,7 +95,7 @@ Contrairement à d'autres méthodes de recherche d'éléments, comme [`Document. 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 `
` étant donné que « M » et « m » 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()` : ```js const element = document.createElement("div");