From 84b619dcde37e63d5acd471d5072c05cdd1c0b62 Mon Sep 17 00:00:00 2001 From: Carolyn Wu <87150472+cw118@users.noreply.github.com> Date: Sat, 29 Jan 2022 03:42:14 -0500 Subject: Update French querySelectorAll page (#3733) * Updates and fixes for querySelectorAll * Minor rewording / deleting a non-working / superfluous example Co-authored-by: julieng --- files/fr/web/api/element/queryselectorall/index.md | 102 ++++++++++----------- 1 file changed, 46 insertions(+), 56 deletions(-) (limited to 'files/fr/web/api') diff --git a/files/fr/web/api/element/queryselectorall/index.md b/files/fr/web/api/element/queryselectorall/index.md index e11820dd21..f58c8ab23d 100644 --- a/files/fr/web/api/element/queryselectorall/index.md +++ b/files/fr/web/api/element/queryselectorall/index.md @@ -1,99 +1,96 @@ --- title: Element.querySelectorAll() slug: Web/API/Element/querySelectorAll -tags: - - API - - DOM - - Element - - Méthode - - Reference translation_of: Web/API/Element/querySelectorAll +browser-compat: api.Element.querySelectorAll --- {{APIRef("DOM")}} -La méthode  **`querySelectorAll()`** de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée. - -> **Note :** La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} . +La méthode **`querySelectorAll()`** de [`Element`](/fr/docs/Web/API/Element) retourne une [`NodeList`](/fr/docs/Web/API/NodeList) statique (non-dynamique) des éléments correspondants au groupe de sélecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée. ## Syntaxe - elementList = baseElement.querySelectorAll(selectors); +```js +elementList = parentNode.querySelectorAll(selectors); +``` ### Paramètres - `selectors` - - : une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) ; si ce n'est pas le cas, une exception `SyntaxError` est levée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule. + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors) ; si ce n'est pas le cas, une exception `SyntaxError` est levée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule. -> **Note :** Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. +> **Note :** Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir [Échappement des caractères](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#échappement_des_caractères) pour plus d'informations. -### Valeur retournée +### Valeur de retour -Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés. +Une [`NodeList`](/fr/docs/Web/API/NodeList) statique contenant un objet [`Element`](/fr/docs/Web/API/Element) pour chaque nœud descendant qui correspond à au moins un des sélecteurs spécifiés au moment où la méthode est appelée. -> **Note :** Si le `selectors` spécifié inclus un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste renvoyée est toujours vide. +> **Note :** Si les sélecteurs spécifiés avec `selectors` incluent un [pseudo-élément CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste renvoyée est toujours vide. ### Exception - `SyntaxError` - - : La syntaxe de la chaîne du `selectors` spécifié n'est pas correcte. + - : La syntaxe de la chaîne du `selectors` spécifiée n'est pas valide. ## Exemples -### Obtention d'une liste de correspondances +### Obtenir d'une liste de correspondances -Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément `"myBox"` : +Pour obtenir une [`NodeList`](/fr/docs/Web/API/NodeList) de tous les éléments [`

`](/fr/docs/Web/HTML/Element/p) contenus dans l'élément `myBox` : ```js -var matches = myBox.querySelectorAll("p"); +let matches = myBox.querySelectorAll("p"); ``` -Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans `"myBox"`  avec une classe  "`note`" ou  "`alert`" : +Cet exemple renvoie une liste de tous les éléments [`

`](/fr/docs/Web/HTML/Element/div) dans `myBox` avec une classe `note` ou `alert` : ```js -var matches = myBox.querySelectorAll("div.note, div.alert"); +let matches = myBox.querySelectorAll("div.note, div.alert"); ``` -Ici, nous obtenons une liste d'éléments `p` du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe `'highlighted'` et qui sont inclus dans un conteneur dont l'ID est `"test"` : +Ici, nous obtenons une liste d'éléments `

` du document, dont le parent immédiat est un [`

`](/fr/docs/Web/HTML/Element/div) qui a la classe `highlighted` et qui sont inclus dans un conteneur dont l'`id` est `test` : ```js -var container = document.querySelector("#test"); -var matches = container.querySelectorAll("div.highlighted > p"); +let container = document.querySelector("#test"); +let matches = container.querySelectorAll("div.highlighted > p"); ``` -Cet exemple utilise un [sélecteur d'attribut](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut) pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé `'data-src'`: +Cet exemple utilise un [sélecteur d'attribut](/fr/docs/Web/CSS/Attribute_selectors) pour renvoyer une liste d'éléments [`